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

2022-01-22 00:00:00 append jquery click javascript

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

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();
});

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

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.

推荐答案

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

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();
    });
});

或者使用 .live() 方法在添加任何新的 .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();
});

相关文章