追加了 JQuery 的代码不会在输入文件上触发单击事件

Code appended with JQuery does not fire click event on input file

本文关键字：文件 事件 单击 输入 JQuery 代码 追加      更新时间：2023-09-26

我正在附加一小块代码，其中有一个图像，单击该图像时会在input上触发click事件以进行文件上传。加载和/或刷新页面时，只有一个块一旦更改，就会触发事件以附加一个新块。

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

问题是附加的代码不会触发input上的click事件。代码是相同的，并且正确附加到.add_new_image主标记中。可能出了什么问题？

您需要使用 .on()，因为当您绑定"更改"侦听器时，新的".file-chooser"不存在。 jQuery on 为您处理所有这些。

委托事件的优点是它们可以处理来自 稍后添加到文档中的后代元素。

$('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>

相关文章：