Jquery .on ('change') não é acionado para elementos adicionados dinamicamente
Então eu tenho uma página com a seguinte estrutura
<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 eu escrevi um pouco de jquery assim:
$('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();
}
});
então, quando eu insiro um elemento no arquivo, ele gera um div sob o anterior:
<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>
Mas agora, apesar do evento estar registrado usando.on()
a segunda entrada de arquivo no div não dispara o evento. o que estou perdendo?