我正在附加一小段代码,其中包含一个图像,单击该图像会触发 click
事件于 input
用于文件上传。当页面加载和/或刷新时,只有一个 block 一旦更改,就会触发事件以追加新 block 。
<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>
用于附加的 JQuery 代码:
$('#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>');
});
问题是附加的代码不会触发 click
事件于 input
。代码是相同的,并且正确附加在 .add_new_image
内部。主标签。可能出了什么问题?
最佳答案
您需要使用.on()
因为当您绑定(bind)“更改”监听器时,新的“.file-chooser”不存在。 jQuery on 会为您处理所有这些事情。
Delegated events have the advantage that they can process events from descendant elements that are added to the document at a 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>
关于javascript - 附加 JQuery 的代码不会触发输入文件上的单击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34913605/