我如何獲取jquery .each函數與.on（'change'）函數一起使用的動態元素

Question

我在頁面中有一個圖庫，您可以在其中單擊加號和減號來添加和刪除圖庫項目，然后將文件添加到該新添加項目的輸入中。

我創建了一個文件讀取器來獲取文件的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：

<div class="image-field">
            <div class="file_upload">
                <input class="image_file" id="gallery_files" name="book[gallery_attributes][images_attributes][1412768497650][file]" type="file">
            </div>
        </div>

誰能告訴我為什么對於附加的較新項目，.each函數不能與該.on函數一起使用。 我認為這是最主要的功能，顯然在這里不起作用，而在下面則不起作用。

Answer 1

您已正確確定需要使用事件委托，因為已在頁面上動態添加了元素。 問題是事件委托在代碼運行時存在的元素上起作用，並且您正在使用.each()循環遍歷您希望包含動態添加的元素的集合（它不會，因為它們目前不存在）。

本質上，問題在於初始選擇器$('#gallery .gallery-item .file_upload') 。

該選擇器的.gallery-item .file_upload部分是標識用於事件委派的動態元素的一部分，因此您需要使用以下類似內容：

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

我已經取消了對.each()的調用，因為它是多余的； .on()遍歷了匹配的元素集，並且您的$('#gallery')選擇器無論如何應該只匹配單個元素。

注意：您在選擇器中使用了.gallery-item ，但是您提供的HTML中只有一個image-field類。 取決於頁面的確切外觀，這可能是問題，也可能不是問題，因為您沒有提供我不得不猜測的信息。

Answer 2

為什么還要使用.each() ？ 您需要做的就是使用選擇器，因為jQuery已經將所有選定項循環到.on()

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

問題在於，除非您每次都在添加新項目時都進行循環，否則每個項目都會從圖庫中獲取當前已有的輸入，但是您將在同一元素上多次綁定處理程序。