Question

我想在DOM中添加html项（div中的文本和按钮），每个项都可以编辑或删除。我使用jquery执行此操作如下。

<div id="ak"></div>
<input type="text" name="lname" id="itext" size="60"/><br/>
<button id="but">Add Item</button>
<div id="test"></div>

$("#but").click(function(){
        var istring = $("#itext").val();
        $("#ak").append("<div class=\"item\"><p>"+istring+"<button class=\"editable\">Edit</button><button class=\"deletable\">Delete</button></p></div>");
        $("#itext").val("");
});

$(".deletable").click(function(){
    alert("Alert !!");   
});

然而，当我按下每个项目中的删除按钮时没有任何反应（应该发出警报）。我觉得有些不对劲。任何帮助表示赞赏。

Answer 1

几天前我遇到了这个确切的问题，但是我的一个同事很友好地解决了我的困惑。

将HTML添加到dom或使用jQuery live后，您需要重新绑定点击事件。一些旧版本的jQuery不支持实时，因此您可以使用其他方法。

以下在加载HTML后重新点击click事件：

$("#but").click(function(){
        var istring = $("#itext").val();
        $("#ak").append("<div class=\"item\"><p>"+istring+"<button class=\"editable\">Edit</button><button class=\"deletable\">Delete</button></p></div>");
        $("#itext").val("");
        clickEvent();
});
function clickEvent(){
    $(".deletable").click(function(){
        alert("Alert !!");   
    });
}

或者，使用jQuery live：

$(".deletable").live('click',function(){
    alert("Alert !!");   
});

Answer 2

使用jQuery.live bcoz

.live（）方法可以影响尚未添加的元素通过使用事件到DOM 委派：

$(".deletable").live('click',function(){
    alert("Alert !!");   
});

DEMO

Answer 3

我认为它是jQuery闪亮的宝石之一，这些事件处理程序是动态创建的HTML元素。这是一个非常有效的主题，但我仍然希望我们有一个季度，每个人都会问为什么事件处理程序没有处理动态创建的HTML元素。：d

在每一个这样的问题中，我都认为你使用.delegate()代替.live()，特别是因为（至少在你的示例代码中）你知道完全来自你要插入元素的开始。

$('#ak').delegate('.deletable', 'click', function (e) {
    // do something
});

没有必要去.live()并在全局上下文中弹出全局处理程序。

如果您真的不想沿着live / delegate路径前进，那么您也可以在创建元素时随时捕捉处理程序。

// creating a button with a click event handler
$('<button/>', {
    id : 'foo',
    class : 'deletable',
    click : function (e) {
        // do something
    }
});

...然后你可以使用它并将其追加到某个地方。您可能会发现，这种方法在集成到您的代码中时可能更适合您。

jQuery：编辑用户插入的DOM元素

3 个答案:

DEMO