我如何获取jquery .each函数与.on（'change'）函数一起使用的动态元素

Question

I have a gallery in a page where you click plus and minus to add and remove gallery items to which you then add a file to the input for that newly appended item.

I have created a file reader to get the files url but it only works on the first element on that page, anything added after that dynamically is not affected.

here is my 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);
    });
  });

The append gallery item function:

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

Can anyone tell me why the .each function will not work with this .on function for the newer items that are appended. I think it is the top most function thats obviously not working here and not the others below.

Answer 1

You've correctly identified that you need to use event delegation because you have dynamically added elements on your page. The problem is that event delegation works on an element that exists when the code runs , and you're using an .each() loop to iterate over a collection that you expect to contain your dynamically added elements (which it won't because they don't currently exist).

Essentially, the problem is the initial selector $('#gallery .gallery-item .file_upload') .

The .gallery-item .file_upload part of that selector is part of what identifies the dynamic elements for event delegation, so you need to use something more like this:

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

I've taken out the call to .each() because it's redundant; .on() iterates over the set of matched elements already, and your $('#gallery') selector should only match a single element anyway.

Note: You've used .gallery-item in the selector, but there's only an image-field class in the HTML you provided. That may or may not be an issue depending on exactly what the page looks like, since you haven't provided that information I've had to guess.

Answer 2

Why are you even using .each() ? All you need to make it work is using the selector since jQuery already will loop all of the selected items to .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);
});

The problem is that each is taking the curently existing inputs from the gallery unless you are looping everytime you are appending new items but then you will bind the handler alot of times on the same element.