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