jquery add listener to appended content

Question

I have some jQuery code like this:

$("#add").click(function(event){
    $("#list").append('<a class="remove" href="#">x</a>');

    return false;
});

$('.remove').live('click', function(){
    alert("123");
});

If one clicked on class=remove I would like it to alert 123. This doesn't happen though. I think this is a simple idea but I must be missing something.

Any ideas?

Thanks.

You need to [delegate](http://api.jquery.com/delegate/). – crush Feb 12 '13 at 13:06 — crush, Feb 12 '13 at 13:06

score 13 · Accepted Answer · answered Feb 12 '13 at 13:06

13

Live is deprecated, use on

$(document).on('click','.remove',function(){
alert("123");
});

answered Feb 12 '13 at 13:06

Anton

32,245
5
44
54

and you do the document click to bind to something that is present at load time – mplungjan Feb 12 '13 at 13:07
I see that it does do event delegation in the manner that you are using it. Interesting. Thanks for this. – crush Feb 12 '13 at 13:07
Yes, if a selector is present it is a delegated event handler. Read more here: http://api.jquery.com/on/ – Angel Feb 12 '13 at 13:10
This is definitely the best answer in my opinion. – crush Feb 12 '13 at 13:14

score 2 · Answer 2 · answered Feb 12 '13 at 13:07

Another way to add element and bind event without delegation:

$("#add").click(function(event){
    $("<a />", {
        "class": "remove",
        href: "#",
        text: "x"
    }).on("click", function() {
        alert("123");
        return false;
    }).appendTo("#list");

    return false;
});

Avoid using live method, since it was deprecated and finally removed in the last version of jQuery.

score 2 · Answer 3 · answered Feb 12 '13 at 13:16

try on delegate function..since you are apending that to list... you can use #list which is better in performance that the document

 $('#list').on('click','.remove', function(){
     alert("123");
});

you can go through the link to read more about on() event

jquery add listener to appended content

3 Answers3