Javascript 如何获得jquery.each函数与动态元素的.on（'；change'；）函数一起工作

我在一个页面中有一个图库，您可以单击加号和减号来添加和删除图库项目，然后将文件添加到新添加的项目的输入中

我创建了一个文件阅读器来获取文件url，但它只在该页面的第一个元素上工作，之后动态添加的任何内容都不会受到影响

这是我的JS：

$('#gallery .gallery-item .file_upload').each(function() {
    var $this = $( this );
    //$('body').on('click', 'input', function() {
    $this.on( 'change', 'input', function(evt){
        var files = evt.target.files;
        var file = files[0];
        console.log(files[0]);
        var reader = new FileReader();
        reader.onload = (function(file) {
            return function(e) {
                console.log(e.target.result);
            };
        })(file);
        reader.readAsDataURL(file);
    });
  });

附加库项功能：

$('#gallery')
    .on('cocoon:before-insert', function(e,image_field) {
        image_field.insertAfter( $(this).next() );
    })
    .on('cocoon:after-remove', function(e, image_field) {
        $(this).data('remove-timeout', 1000);
        image_field.fadeOut('slow');
});

    $('.gallery-item').each(function() {
        $(this).next('a.add_fields').appendTo(this);
        $(this).next('input').appendTo(this);
    });

HTML:

---

有人能告诉我为什么.each函数不能用于所附加的较新项的.on函数吗。我认为这是最上面的函数，显然在这里不起作用，下面的其他函数也不起作用。

为什么还要使用

。each（）

？您只需使用选择器即可使其工作，因为jQuery已经将所有选定项循环到

.on（）

---

问题是，每个处理程序都从库中获取当前存在的输入，除非每次添加新项目时都循环，但随后会在同一元素上多次绑定处理程序。

您已正确确定需要使用事件委派，因为您在页面上动态添加了元素。问题是，事件委派在代码运行时存在的元素上工作，并且您正在使用

.each（）

循环来迭代一个您希望包含动态添加的元素的集合（因为它们当前不存在，所以不会这样做）

本质上，问题在于初始选择器

$（'#gallery.gallery item.file_upload'）

该选择器的

.gallery item.file\u upload

部分用于标识事件委派的动态元素，因此您需要使用类似以下内容：

$('#gallery').on('change', '.gallery-item .file_upload input', function(e) {
    // your code here
});

我已经调用了

.each（）

，因为它是多余的

.on（）

已经在匹配的元素集上迭代，并且您的

$（“#gallery”）

选择器无论如何应该只匹配单个元素

---

注意：您已经在选择器中使用了

.gallery项

，但在您提供的HTML中只有一个

图像字段

类。这可能是一个问题，也可能不是一个问题，这取决于页面的外观，因为您没有提供我不得不猜测的信息。

Spokey是的，所以我按下加号按钮，它会添加一个新字段，然后要将图像添加到输入中，我单击upload image。新添加的文件字段将添加到加载到页面上的第一个字段旁边。当我尝试此操作时，它只会从第一个项目读取它。请尝试更改选择器

$（“#gallery.gallery item”）

。不太清楚哪些项是动态添加的，您的选择器应该是静态页面上的父项，并且从一开始就存在。@WouterFlorijn不，您不需要向它们添加事件侦听器-这正是事件委派存在的原因。问题是，正如我在回答中所述，他对

.each（）

的选择器太具体，对

.on（）

调用的选择器可能不够具体（或者根据他的确切HTML完全可以正常工作）。@WouterFlorijn表单（带参数），其中

.on（）此处使用了

，使其能够与动态添加的元素一起工作。今天我学到了一些关于jQuery的新知识：）很抱歉让人误解了。是的，这是委托的顺序，因此它从父div的id开始。on基本上贯穿

.gallery item.file\u上载输入

，然后运行

.on（'change'）

。很酷，谢谢你的解释。：）

$('#gallery .gallery-item .file_upload').on( 'change', 'input', function(evt){
        var files = evt.target.files;
        var file = files[0];
        console.log(files[0]);
        var reader = new FileReader();
        reader.onload = (function(file) {
            return function(e) {
                console.log(e.target.result);
            };
        })(file);
        reader.readAsDataURL(file);
});

$('#gallery').on('change', '.gallery-item .file_upload input', function(e) {
    // your code here
});