附加有 JQuery 的代码不会触发输入文件上的点击事件

Question

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

<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 主标记内。有什么问题吗？

Answer 1

您需要使用 .on()，因为当您绑定 "change" 侦听器时，您的新“.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>

附加有 JQuery 的代码不会触发输入文件上的点击事件

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

html

javascript

jquery

mouseclick-event