.trigger ("change") funktioniert nicht in .on ("change")

Question

Ich habe .on("change") Event-Funktion verwendet, da sich ein Teil in meinem gesamten Code dynamisch ändert. .trigger("change") funktioniert gut in .change() aber nicht auf .on("change"). Hier ist mein Code:

$('#popupContent').on('change', '#gradeYearLevel', function() { 
     var $course = $('#course'); 
     var $section = $('#section'); 

     if ($(this).val() > 4) { 
      $type = 0; 
     } 
     else { 
      $type = 1; 
     } 
     if ($('#gradeYearLevel').val() == '') { 
      $course.empty().append($("<option>", {"value": ""}).html("-- Select --")); 
      $section.empty().append($("<option>", {"value": ""}).html("-- Select --")); 
     } 
     else { 
      $.getJSON(BASE_PATH + "getJSONCoursesByType/" + $type, function(data) { 
       $course.empty().append($("<option>", {"value": ""}).html("-- Select --")); 
       $.each(data, function(k,v){ 
        $course.append(
         $("<option>", {"value": v.id}).html(v.title) 
        ); 
       }); 
      }); 
      $.getJSON(BASE_PATH + "getJSONSectionsByType/" + $type, function(data) { 
       $section.empty().append($("<option>", {"value": ""}).html("-- Select --")); 
       $.each(data, function(k,v){ 
        $section.append(
         $("<option>", {"value": v.id}).html(v.name) 
        ); 
       }); 
      }); 
     } 
    }).trigger("change"); 

Answer 1

Das Problem ist, weil Sie das Auslösen der change Ereignis auf dem #popupContent Element als von on() zurückgegeben, nicht die #gradeYearLevel, die der delegierte Event-Handler für zuhört.

Sie müssen trigger() auf dem untergeordneten Element aufrufen, damit das Ereignis platzen kann. Versuchen Sie Folgendes:

$('#popupContent').on('change', '#gradeYearLevel', function() { 
    // your code here... 
}) 

$('#gradeYearLevel').trigger("change");