click event attached with dynamically created a tag is not firing

Question

I am creating some a tag dynamically. Then I am trying to attach click event with them. But those events are not firing.

Here is my code:

$(function() {
    onUploadReady();
});

var onUploadReady = function() {
    $('a[name=add]').on('click', function(event){
        event.stopPropagation();
        $('table#multiUpload').append('<tr><td style=\"text-align: center;\"><input type=\"file\" name=\"file\"/></td><td><a href="#" name="remove">Remove</a></td></tr>');
        return false;
    });

    $('a[name=remove]').on('click', function(event){
       event.stopPropagation();
       $(this).parents('tr').eq(0).remove(); 
       return false;
    });
}

If I do $('a[name=remove]').live('click', function(event) instead of $('a[name=remove]').on('click', function(event), then the event is firing. I read somewhere that usage of live is discouraged, and we should use on. Also event propagation or bubbling can occur if we use live. So how do I solve the issue?

jsFiddle.

We shud not discourage people by downvoting valid questions. — Arvind Bhardwaj, Jan 10 '13 at 06:56
Possible duplicate of http://stackoverflow.com/q/14133570/1036917 — Justin John, Jan 10 '13 at 07:40

Arvind Bhardwaj · Accepted Answer · 2013-01-10T06:51:18.310

3

Do it like:

$("parent_selector").on('click', 'a[name=remove]', function(e){
   //do something
})

If parent_selector is not known, use document instead.

In your example, you can write:

$("table#multiUpload").on('click', 'a[name=remove]', function(e){
   //do something
})

The syntax you are using is just like bind. For dynamically added elements you should use the above syntax. In this we attach the handler to parent which already exists, instead of newly added element. So it will work for all elements added in future.

edited Jan 10 '13 at 06:51

answered Jan 10 '13 at 06:44

Arvind Bhardwaj

5,231
5
35
49

The parent `table#multiUpload` is known, so I can call it as: `$('table#multiUpload').on('click', 'a[name=remove]', function (event) {//something});`, right? – Tapas Bose Jan 10 '13 at 06:48
1

Yes, this is absolutely fine. – Arvind Bhardwaj Jan 10 '13 at 06:49
Thanks Arvind, its working, I will accept the answer after 7mins. – Tapas Bose Jan 10 '13 at 06:51

score 2 · Answer 2 · answered Jan 10 '13 at 06:47

2

use:

$(document).on('click', 'a[name=remove]', function(e){
...
});

answered Jan 10 '13 at 06:47

Sudhir Bastakoti

99,167
15
158
162

this really helped me, thank you. i was having an issue where Google Analytics would not register my onclick trackEvent call when I changed the attibute with jQuery. Changed my function syntax to the above and it worked. Thanks! – surfbird0713 Aug 13 '13 at 21:13

click event attached with dynamically created a tag is not firing

2 Answers2