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.

Answer 1

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.

Answer 2

use:

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