Jquery .on ('cambiamento') non sta lavorando per gli elementi aggiunti dinamicamente

Question

Così ho una pagina con la seguente struttura

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

e ho scritto un po 'di jQuery così:

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

così quando entro un elemento nel file genera un div con il precedente:

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

Ma ora, nonostante l'evento sia re gisterizzato usando .on() il secondo file inserito nel div non attiva l'evento. Cosa mi manca?

Answer 1

Sostituire

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

da

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

Answer 2

provare questo:

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

Collegare un gestore di uno o più eventi per tutti gli elementi che corrispondono al 012 Selettore, ora o in futuro, in base a un set specifico di elementi radice . A partire da jQuery 1.7, .delegate() è stato sostituito dal metodo .on(). Per le versioni precedenti, tuttavia, rimane il mezzo più efficace per utilizzare la delega degli eventi. Ulteriori informazioni sull'associazione e sulla delega degli eventi si trovano nel metodo .on().

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

Answer 4

può essere l'uso $.live() metodo jQuery, la sua deprecato ma funziona per me:

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

maggiori informazioni: http://api.jquery.com/live/

se siete riluttanti a utilizzare l'ultima (.on()) utilizzare in questo modo:

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