動態生成下拉不聽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)); 
    }); 
    }); 
}); 

我有這個代碼。此將根據現有的下拉菜單的選擇value.And還新創建的下拉列表具有相同的變化事件生成另一個dropdown.But添加下拉動態生成的Select框不會引發事件。

怎麼辦？

Answer 1

你的代碼應該改變如下。將事件綁定到DOM中的現有元素。然後查找子元素。你應該使用.on方法來閱讀事件委託。

從jQuery 1.7開始，.delegate（）已被.on（）方法取代。 但是，對於較早的版本，它仍然是 使用事件委派的最有效方法。有關事件綁定和委託 的更多信息位於.on（）方法中。

更換$('[id^=drop_id]').on('change', function() {下面

$('#parentid').on('change', '[id^=drop_id]', function() { 

與您的代碼的問題是，新加入的元素沒有綁定到這些事件。

Read more

Answer 2

無處開往這個新下拉的onchange事件。唯一的onchange綁定正在頁面上發生。你必須明確地綁定平變化到新的下拉aafter它被添加到頁面

Answer 3

其事件委託的情況下，新創建的elems的將不會得到改變事件，試試這個方法：

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

因爲當文檔被加載時，元素不在dom中，所以直接的事件綁定不會影響新插入的dom元素。這就是爲什麼我們需要將事件委託給所有其他元素的父親或者是在加載dom時可用的最近父親的$(document)。

所以最終代碼應該是這樣的：

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