Jquery .on('change') not firing for dynamically added elements

Question

So I've got a page with the following structure

<div class="editCampaignBanner">
    <div>
    <hr>
    <label for="file">Upload a new image</label>
    <input id="file" type="file" name="file" class="valid">
    <label for="NewImageURLs">Link URL (Optional)</label>
    <input id="NewImageURLs" type="text" value="" name="NewImageURLs">
    <hr>
    </div>
</div>

and I've written some jquery thus:

$('div.editCampaignBanner input:file').on('change', function () {
        var value = $(this).val();
        var div = $(this).parent();
        var html = '<div>'+ div.html() + '</div>';
        if (value.length > 0) {
            div.after(html);
        }
        else if ($(this) > 1) {
            div.remove();
        }
    });

so when I enter an element into the file it generates a div under the previous one:

    <div class="editCampaignBanner">
        <div>
        <hr>
        <label for="file">Upload a new image</label>
        <input id="file" type="file" name="file" class="valid">
        <label for="NewImageURLs">Link URL (Optional)</label>
        <input id="NewImageURLs" type="text" value="" name="NewImageURLs">
        <hr>
        </div>
        <div>
        <hr>
        <label for="file">Upload a new image</label>
        <input id="file" type="file" name="file" class="valid">
        <label for="NewImageURLs">Link URL (Optional)</label>
        <input id="NewImageURLs" type="text" value="" name="NewImageURLs">
        <hr>
        </div>
    </div>

But now, despite the event being registered using .on() the second file input in the div does not fire the event. What am I missing?

score 13 · Accepted Answer · answered Oct 18 '12 at 08:26

13

Replace

$('div.editCampaignBanner input:file').on('change', function () {

by

$('div.editCampaignBanner').on('change', 'input:file', function () {

answered Oct 18 '12 at 08:26

Denys Séguret

372,613
87
782
758

right, so you bind the on to the document with a selector! Excellent ta! – Liam Oct 18 '12 at 08:29
1

As you don't seem to remove `div.editCampaignBanner`, you may use it as base for your `on` instead of the document. – Denys Séguret Oct 18 '12 at 08:30

score 4 · Answer 2 · answered Oct 18 '12 at 08:30

4

$(document).delegate("div.editCampaignBanner input:file", "change", function() {
  //code goes here
});


$(document).on('change', 'div.editCampaignBanner input:file', function () {
 //code goes here
});

Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements. As of jQuery 1.7, .delegate() has been superseded by the .on() method. For earlier versions, however, it remains the most effective means to use event delegation. More information on event binding and delegation is in the .on() method.

Differences Between jQuery .bind() vs .live() vs .delegate() vs .on()

answered Oct 18 '12 at 08:30

Techie

44,706
42
157
243

I said both are possible. I don't know which jquery version he's using. – Techie Oct 18 '12 at 08:32
He uses on, so obviously he has at least 1.7. – Denys Séguret Oct 18 '12 at 08:33
I was showing him possibilities and he can go through and learn. Hope it's not a crime to show the possibilities of a scenario. – Techie Oct 18 '12 at 08:36
1

When somebody uses the right function, there is no point in reminding him the list of functions he should not use. – Denys Séguret Oct 18 '12 at 08:38
2

like I said I was pointing the possibilities and if you read the link I have posted at the end, That article shows which is the best method to use and what are the options. I was being nice showing him options available. – Techie Oct 18 '12 at 08:42

score 1 · Answer 3 · answered Oct 18 '12 at 08:28

try this:

$('div.editCampaignBanner').on('change','input:file', function () {
        var value = $(this).val();
        var div = $(this).parent();
        var html = '<div>'+ div.html() + '</div>';
        if (value.length > 0) {
            div.after(html);
        }
        else if ($(this) > 1) {
            div.remove();
        }
    });

score 0 · Answer 4 · edited Nov 05 '13 at 10:52

May be use $.live() jquery method, its deprecated but works for me:

$('div.editCampaignBanner input:file').live('change', function () {
        var value = $(this).val();
        var div = $(this).parent();
        var html = '<div>'+ div.html() + '</div>';
        if (value.length > 0) {
            div.after(html);
        }
        else if ($(this) > 1) {
            div.remove();
        }
    });

more info : http://api.jquery.com/live/

if you are reluctant on using the latest (.on()) use it like this :

function fileChanged(ele){
    var value = ele.val();
    var div = ele.parent();
    var html = '<div>'+ div.html() + '</div>';
    if (value.length > 0) {
        div.after(html);
    }
    else if (ele > 1) {
        div.remove();
    }
    $('div.editCampaignBanner').unbind().on('change','input:file', function () {
        fileChanged($(this))
    });
}
$(function(){
    $('div.editCampaignBanner').on('change','input:file', function () {
        fileChanged($(this))
    });
});

Just to note, as of JQuery 1.7 live is actually identical to on (http://www.jquery4u.com/jquery-functions/on-vs-live-review/#.UH-6cMW5_mc) There are significant problems with live, hence it's replacement — Liam, Oct 18 '12 at 10:03

Jquery .on('change') not firing for dynamically added elements

4 Answers4

Linked