jQuery functions not responding after append()

问题

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 bound to that element will not respond. Here's roughly what my code looks like:

$(".add").click(function() {
$("#targetbox").append("<span class='remove'>This element was added</span>");
});

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

If I pre-populate #targetbox with items, they respond to the click function. It's only the items that are dynamically added that do not respond to the function.

回答1:

Add the click method directly to your newly appended element

$(".add").click(function() {
    $("#targetbox").append("<span class='remove'>This element was added</span>")
    .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("<span class='remove'>This element was added</span>");
});

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

回答2:

Your code handles the click event for all elements currently in $('.remove').
Any elements that do not exist yet are not affected.

You need to call the .live() or .delegate methods, which will handle the event for all elements that match the selector, no matter when they were created.

For example:

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

回答3:

It's because when your code runs, the items aren't added yet. You need to add the remove click function to be dynamically assigned to your new block after you add it during the add click function.

$(".add").click(function() {
  $("#targetbox").append("<span class='remove'>This element was added</span>");
  // Add code here for .remove click function
});

来源：https://stackoverflow.com/questions/4369908/jquery-functions-not-responding-after-append

标签

javascript

jquery

click

append