jQuery函数在append（）之后没有响应答案

【问题标题】：jQuery functions not responding after append()jQuery函数在append（）之后没有响应
【发布时间】：2011-05-21 04:08:59
【问题描述】：

我正在创建一系列 div 框，让用户可以使用 jQuery 从每个框中添加/删除项目。我发现我在一个盒子里添加了一个新元素后，我绑定到那个元素的点击函数就没有响应了。我的代码大致如下：

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

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

如果我用项目预先填充#targetbox，它们会响应点击功能。只有动态添加的项目不响应函数。

【问题讨论】：

标签： javascript jquery click append

【解决方案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 元素后为您绑定点击事件

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

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

【讨论】：

不知道“live()”方法，这很方便！

【解决方案2】：

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

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

例如：

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

【讨论】：

【解决方案3】：

这是因为当您的代码运行时，尚未添加项目。在添加点击功能期间添加后，您需要添加删除点击功能以动态分配给您的新块。

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

【讨论】：