jQuery函数在append()之后没有响应

Question

我正在创建一系列div框,允许用户使用jQuery从每个框中添加/删除项目.我发现在向框中添加新元素后,我绑定到该元素的单击函数将不会响应.这大致是我的代码的样子:

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

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

如果我使用项目预先填充#targetbox,它们会响应点击功能.它只是动态添加的项目,不响应该功能.

Answer 1

将click方法直接添加到新添加的元素中

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

或者.live()在追加任何新.remove元素后使用将为您绑定click事件的方法

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

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

Answer 2

您的代码处理所有元素click事件目前在$('.remove').
任何尚不存在的元素都不会受到影响.

您需要调用.live()或.delegate方法,它们将处理与选择器匹配的所有元素的事件,无论它们何时被创建.

例如:

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