jQuery 函数在 append() 后没有响应 [英] jQuery functions not responding after append()

问题描述

我正在创建一系列 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.

推荐答案

直接在你新追加的元素中添加点击方法

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

这篇关于jQuery 函数在 append() 后没有响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！