JQuery .on ('change') nicht für dynamisch hinzugefügte Elemente Brennen

Question

Also habe ich

<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> 

eine Seite mit der folgenden Struktur, und ich habe einige jQuery so geschrieben:

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

so, wenn ich ein Element in die Datei eingeben erzeugt er ein div unter dem vorherigen:

<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> 

Aber jetzt, trotz der sein Wieder Ereignis Gistored mit .on() die zweite Datei-Eingabe in der div wird das Ereignis nicht ausgelöst. Was vermisse ich?

Answer 1

ersetzen

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

von

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

Answer 2

try this:

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

für alle Elemente eines Handlers an einen oder mehrere Ereignisse anhängen, die die 012 entsprechenSelektor, jetzt oder in Zukunft, basierend auf einem bestimmten Satz von Root-Elementen. Ab jQuery 1.7 wurde .delegate() durch die Methode .on() ersetzt. Für frühere Versionen bleibt es jedoch das effektivste Mittel zur Verwendung der Ereignisdelegierung. Weitere Informationen zur Ereignisbindung und -delegierung finden Sie in der .on() -Methode.

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

Answer 4

Kann sein Einsatz $.live() jquery Methode, seine veraltet aber funktioniert für mich:

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

weitere Informationen: http://api.jquery.com/live/

wenn Sie die neueste über die Verwendung (.on() nur ungern) verwende es so:

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