jQuery的。对没有触发动态添加元素

Question

（“变”）

所以我有具有以下结构

<div class="editCampaignBanner"> 
    <div> 
    <hr> 
    <label for="file">Upload a new image</label> 
    <input id="file" type="file" name="file" class="valid"> 
    <label for="NewImageURLs">Link URL (Optional)</label> 
    <input id="NewImageURLs" type="text" value="" name="NewImageURLs"> 
    <hr> 
    </div> 
</div> 

一个页面，我因此写了一些jQuery的：

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

现在

<div class="editCampaignBanner"> 
     <div> 
     <hr> 
     <label for="file">Upload a new image</label> 
     <input id="file" type="file" name="file" class="valid"> 
     <label for="NewImageURLs">Link URL (Optional)</label> 
     <input id="NewImageURLs" type="text" value="" name="NewImageURLs"> 
     <hr> 
     </div> 
     <div> 
     <hr> 
     <label for="file">Upload a new image</label> 
     <input id="file" type="file" name="file" class="valid"> 
     <label for="NewImageURLs">Link URL (Optional)</label> 
     <input id="NewImageURLs" type="text" value="" name="NewImageURLs"> 
     <hr> 
     </div> 
    </div> 

但是，尽管该事件被重新：

，所以当我进入一个元素到文件时，它产生在上一个一个div使用.on()注册，div中的第二个文件输入不会触发事件。我错过了什么？

Answer 1

更换

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

通过

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

Answer 2

试试这个：

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

Answer 3

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


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

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

Differences Between jQuery .bind() vs .live() vs .delegate() vs .on()

Answer 4

可能使用$.live() jQuery的方法，其弃用，但对我的作品：

$('div.editCampaignBanner input:file').live('change', function() { 
     var value = $(this).val(); 
     var div = $(this).parent(); 
     var html = '<div>'+ div.html() + '</div>'; 
     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>'+ div.html() + '</div>'; 
    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)) 
    }); 
});