JQuery와 및 선택 2 선택 기준

Question

내가이 같은 요소에 ID의 참조가 설정 객체가 있다고 가정하자 :

(function (Erasmus, $, undefined) { 
    var settings = { 
     Agreement : { 
      SourceUniversity: "#scrUni", 
     } 
    }; 
    Erasmus.Settings = settings; 
})(window.Erasmus = window.Erasmus || {}, jQuery); 

이제 모든 선택 입력은 선택 2있는 모든 것을 초기화 후 나는에 대한 변경 이벤트를 바인딩 이 같은 입력 :

이제

(function (Erasmus, $, undefined) { 
    var student = { 
     BindPageControls: function() { 
      $(Erasmus.Settings.Agreement.SourceUniversity).on("select2:select", function (selected) { 
       console.log(selected); 
     }); 
     } 
    }; 
    Erasmus.Student = student; 
})(window.Erasmus = window.Erasmus || {}, jQuery); 

문제입니다 난과 결합하는 경우 :

$(Erasmus.Settings.Agreement.SourceUniversity).on(... 

그것은 다른 목적 (? 원래의 입력) 대신에 선택 2 입력과 늘 트리거 이벤트에 결합,하지만이 같은 바인딩 경우 :

$("#srcUni").on(... 

을 그것은 모두 잘 작동합니다. 왜 순수한 문자열과 문자열을 변수로 전달할 때 JQuery에서 다른 참조를 가져 왔습니까?

JQuery와 버전 3.2.1, 선택 2 버전 여기에 4.0.4

Answer 1

코드에서 작동하는 예입니다

$(document).ready(function() { 
 
    $('#srcUni').select2({ 
 
     placeholder: 'Select an option', 
 
     width: 'resolve', 
 
    \t dropdownAutoWidth: 'true', 
 
    \t allowClear: 'true', 
 
    }); 
 

 
    Erasmus.Student.BindPageControls(); 
 
}); 
 

 
(function (Erasmus, $, undefined) { 
 
    var settings = { 
 
     Agreement : { 
 
      SourceUniversity: "#srcUni", 
 
     } 
 
    }; 
 
    Erasmus.Settings = settings; 
 
})(window.Erasmus = window.Erasmus || {}, jQuery); 
 

 
(function (Erasmus, $, undefined) { 
 
    var student = { 
 
     BindPageControls: function() { 
 
      $(Erasmus.Settings.Agreement.SourceUniversity).on("select2:select", function (e) { 
 
      var data = e.params.data; 
 
      console.log("select item: ",data); 
 
     }); 
 
     } 
 
    }; 
 
    Erasmus.Student = student; 
 
})(window.Erasmus = window.Erasmus || {}, jQuery);

select { 
 
    width: 200px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script> 
 

 
<select id="srcUni"> 
 
    <option value="1">Option 1</option> 
 
    <option value="2">Option 2</option> 
 
    <option value="3">Option 3</option> 
 
</select>