JQuery und select2 Selektor Referenz

Question

Lets sagen, dass ich ein Objekt mit Einstellungen haben, die id Verweise auf Elemente, wie folgt aus:

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

Nun sind alle Auswahleingänge sind select2 und nach allem, was die Initialisierung Ich binde die Änderungsereignisse für die Eingabe wie folgt aus:

(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); 

das Problem ist jetzt, dass wenn ich binden mit:

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

Es bindet an ein anderes Objekt (Original-Eingabe?) Anstelle des select2 Eingang und wird nicht Triggerereignisse, aber wenn ich so binden:

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

Es funktioniert alles in Ordnung. Warum wird bei der Übergabe von pure string und string als Variable ein anderer Verweis von JQuery abgerufen?

JQuery Version 3.2.1, select2 Version 4.0.4

Answer 1

Hier ist ein funktionierendes Beispiel aus dem Code:

$(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>