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

Question

I am appending a small block of code that has inside of it an image that when clicked triggers a click event on the input for file uploading. When the page is loaded and/or refreshed, there is only one block that once changed, fires the event to append a new one.

<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>

The JQuery code for appending:

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

The problem is that the appended code does not trigger the click event on the input. The code is identical and it is appended correctly inside of the .add_new_image main tag. What could be wrong?

@charlietfl Yes, that was it. Thank you. – Jan 21 '16 at 01:15 — , Jan 21 '16 at 01:15

Marcos Casagrande · Accepted Answer · 2016-01-21T12:19:33.170

You need to use .on() because when you are binding the "change" listener, your new ".file-chooser" doesn't exist. jQuery on handles all that for you.

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>

@mfgabriel92 Yes it does, check the code snippet I made you. — Marcos Casagrande, Jan 21 '16 at 01:15
I had to do what you suggested in another part of the code I haven't shown, the code to trigger the event. Thanks. — , Jan 21 '16 at 01:18
Also, the next problem I just had was solved with your solution too. Haha! — , Jan 21 '16 at 01:21
Haha, glad it helped, read about jquery on, and delegated events, It will help you alot! — Marcos Casagrande, Jan 21 '16 at 01:22

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

1 Answers1