Jquery .on（’change’）不为动态添加的元素触发

所以我有一个具有以下结构的页面

 
 
 Upload a new image  Link URL (Optional)  
 
  

我写了一些jquery：

 $('div.editCampaignBanner input:file').on('change', function () { var value = $(this).val(); var div = $(this).parent(); var html = '
'+ div.html() + '
'; if (value.length > 0) { div.after(html); } else if ($(this) > 1) { div.remove(); } }); 

所以当我在文件中输入一个元素时，会在前一个元素下生成一个div：

  
 
 
 Upload a new image  Link URL (Optional)  
 
 
 
 Upload a new image  Link URL (Optional)  
 
  

但是现在，尽管事件是使用.on()注册的，但div中的第二个文件输入并不会触发事件。 我错过了什么？

Answer 1

更换

 $('div.editCampaignBanner input:file').on('change', function () { 

通过

 $('div.editCampaignBanner').on('change', 'input:file', function () { 

Answer 2

 $(document).delegate("div.editCampaignBanner input:file", "change", function() { //code goes here }); $(document).on('change', 'div.editCampaignBanner input:file', function () { //code goes here }); 

根据一组特定的根元素，为现在或将来与选择器匹配的所有元素的一个或多个事件附加处理程序。 从jQuery 1.7开始，.delegate（）已被.on（）方法取代。 但是，对于早期版本，它仍然是使用事件委派的最有效方法。 有关事件绑定和委派的更多信息，请参见.on（）方法。

jQuery .bind（）vs .live（）vs .delegate（）vs .on（）之间的差异

Answer 3

试试这个：

 $('div.editCampaignBanner').on('change','input:file', function () { var value = $(this).val(); var div = $(this).parent(); var html = '
'+ div.html() + '
'; if (value.length > 0) { div.after(html); } else if ($(this) > 1) { div.remove(); } }); 

Answer 4

可能是使用$.live() jquery方法，它已被弃用但对我有用：

 $('div.editCampaignBanner input:file').live('change', function () { var value = $(this).val(); var div = $(this).parent(); var html = '
'+ div.html() + '
'; if (value.length > 0) { div.after(html); } else if ($(this) > 1) { div.remove(); } }); 

更多信息： http ： //api.jquery.com/live/

如果你不愿意使用最新的（ .on() ），请使用如下：

 function fileChanged(ele){ var value = ele.val(); var div = ele.parent(); var html = '
'+ div.html() + '
'; if (value.length > 0) { div.after(html); } else if (ele > 1) { div.remove(); } $('div.editCampaignBanner').unbind().on('change','input:file', function () { fileChanged($(this)) }); } $(function(){ $('div.editCampaignBanner').on('change','input:file', function () { fileChanged($(this)) }); });