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.

Answer 1

Live is deprecated, use on

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

Answer 2

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.

Answer 3

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