jQuery functions not responding after append()

Question

I\'m creating a series of div boxes that lets users add/remove items from each box with jQuery. I find that after I add a new element to a box, the click function I have bou

Answer 1

Add the click method directly to your newly appended element

$(".add").click(function() {
    $("#targetbox").append("This element was added")
    .bind("click",function(e) {
        alert("removing");
        $(this).remove();
    });
});

Or use the .live() method that will bind the click event for you after appending any new .remove elements

$(".add").click(function() {
    $("#targetbox").append("This element was added");
});

$(".remove").live("click", function() {
    alert("removing");
    $(this).remove();
});