动态生成的Dropdown不会监听jquery事件

Question

$(document).ready(function() {
    $('[id^=drop_id]').on('change', function() {
        selected = $(this).find('option:selected').data('tid')   
        $.getJSON('path/'+selected,function(data){
        var s = $("<select id='drop_id_goddamnit' name=\"name\" />");
        $(data).each(function() {
          var option = $('<option />');
          option.attr('value', this.taxon.permalink).text(this.taxon.name).attr('data-tid',this.taxon.id);
          option.appendTo(s);
        });
        $('#header').append($(s));
    });
  });
});

我有这个代码.这将根据现有下拉列表的选定值添加下拉列表.此外,新创建的下拉列表具有相同的更改事件以生成另一个下拉列表.但动态生成的选择框不会启动事件.

该怎么办？

Answer 1

它是一个事件委托的案例,新创建的elems将不会获得更改事件,请尝试这种方式:

$(document).on('change', '[id^="drop_id"]', function(){
    //your corresponding code.
});

因为当加载文档时,元素不在dom中,因此直接事件绑定不会影响新插入的dom元素.这就是为什么我们需要将事件委托给$(document)所有其他元素的父元素或者当dom加载时可用的最接近的现有父元素.

所以最终的代码应如下所示:

$(document).on('change', '[id^="drop_id"]', function() {
    selected = $(this).find('option:selected').data('tid')   
    $.getJSON('path/'+selected,function(data){
    var s = $("<select id='drop_id_goddamnit' name=\"name\" />");
    $(data).each(function() {
      var option = $('<option />');
      option.attr('value', this.taxon.permalink).text(this.taxon.name).attr('data-tid',this.taxon.id);
      option.appendTo(s);
    });
    $('#header').append($(s));
});