0

我有一个动态创建行的表。每行都有一个链接按钮，单击该按钮可删除该行。这是这里的点击功能：

$(".deleteButton").on('click', function(){
    console.log("Delete Hit");
    var successful = deleteEntry($(this).attr('id'));
    if(successful == true){
        $(this).parent().parent().remove();
    }else{
        alert("Delete Unsuccessful.");
    }
});

当页面首次加载时，某些按钮是使用一个功能创建的。这些工作，但这个其他功能似乎创建了一个具有正确类的按钮来触发事件。它会创建一个这样的链接。

<a class="deleteButton dButton" href="#">

而正常工作的人会创建这样的链接，

<a href='#' class='deleteButton'>

我已经检查了检查器，它说按钮有类 deleteButton，这是触发事件所必需的，但它似乎完全忽略了它。删除命中从未显示在控制台中。这确实让我困惑了一段时间，我很感激任何人都可以提供的帮助。

4

3 回答 3

2

绑定事件处理程序时，您需要对 DOM 上不存在的元素使用委托事件

$(document).on('click', '.deleteButton', function(){...}

哪里document可以是.deleteButton在处理程序绑定时存在的任何容器。

于 2013-08-21T14:24:59.633 回答
0

现有按钮在页面加载时获取其事件处理程序，但新按钮随后添加到 DOM。您必须更新您的 JavaScript 代码，如下所示：

$(document).on('click', '.deleteButton', function(){
    console.log("Delete Hit");
    var successful = deleteEntry($(this).attr('id'));
    if(successful == true){
        $(this).parent().parent().remove();
    }else{
        alert("Delete Unsuccessful.");
    }
});

在http://api.jquery.com/on/#direct-and-delegated-events的 jQuery 文档中查找更多信息。

于 2013-08-21T14:24:51.143 回答
0

您可以委托您的活动。

$(document).on('click', '.deleteButton', function(e){
    //do something
});

这是一个类似的帖子，我在其中解释了 bind live 和“on”之间的区别。 Jquery/Javascript 在动态内容更新上的表现如何？

于 2013-08-21T14:24:59.693 回答