jQuery函数append（）

Question

后没有响应我创建了一系列div框，让用户使用jQuery从每个框中添加/删除项目。我发现在向框中添加新元素后，我绑定到该元素的click函数将不会响应。这里大概是我的代码是什么样的：

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

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

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

Answer 1

直接添加点击的方法来你的新追加要素

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

或使用将追加任何新.remove元素

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

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

Answer 2

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

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

例如：

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

Answer 3

这是因为你的代码运行时，该项目没有添加。在添加点击函数期间添加新点击后，您需要添加删除点击功能以便将其动态分配给新块。

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