CODEWITHSUNDEEP
jqueryjquery-click-event
Tapas Bose
Tapas Bose

Reputation: 29806

click event attached with dynamically created a tag is not firing

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.

Upvotes: 0

Views: 527

Answers (2)

Arvind Bhardwaj
Arvind Bhardwaj

Reputation: 5291

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.

Upvotes: 3

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100175

use:

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

Upvotes: 2

Related Questions