javascript - Code appended with JQuery does not fire click event on input file -
this question has answer here:
i appending small block of code has inside of image when clicked triggers click event on input file uploading. when page loaded and/or refreshed, there 1 block once changed, fires event append new one.
<div class="add_new_image"> <div class="img"> <div class="file-upload-trigger"> <input type="file" name="imagem[]" class="none file-chooser" required/> <img class="more" src="/assets/auto/images/add_image.png"/> </div> </div> </div> the jquery code appending:
$('#novo_anuncio .file-chooser').change(function() { readurl(this); $('#novo_anuncio .add_new_image').append( '<div class="img">\n\ <div class="file-upload-trigger">\n\ <input type="file" name="imagem[]" class="none file-chooser" required/>\n\ <img class="more" src="/assets/auto/images/add_image.png"/>\n\ </div>\n\ </div>'); }); the problem appended code not trigger click event on input. code identical , appended correctly inside of .add_new_image main tag. wrong?
you need use .on() because when binding "change" listener, new ".file-chooser" doesn't exist. jquery on handles you.
delegated events have advantage can process events descendant elements added document @ later time.
$('body').on('change', '#novo_anuncio .file-chooser', function() { readurl(this); $('#novo_anuncio .add_new_image').append( '<div class="img">\n\ <div class="file-upload-trigger">\n\ <input type="file" name="imagem[]" class="none file-chooser" required/>\n\ <img class="more" src="/assets/auto/images/add_image.png"/>\n\ </div>\n\ </div>'); }); $('body').on('change', '#novo_anuncio .file-chooser', function() { alert("change"); $('#novo_anuncio .add_new_image').append( '<div class="img">\n\ <div class="file-upload-trigger">\n\ <input type="file" name="imagem[]" class="none file-chooser" required/>\n\ <img class="more" src="/assets/auto/images/add_image.png"/>\n\ </div>\n\ </div>'); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="novo_anuncio"> <div class="add_new_image"> <div class="img"> <div class="file-upload-trigger"> <input type="file" name="imagem[]" class="none file-chooser" required/> <img class="more" src="/assets/auto/images/add_image.png"/> </div> </div> </div> </div>
Comments
Post a Comment