Question

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

$(".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，这是触发事件所必需的，但它似乎完全忽略了它。删除命中从未在控制台中显示。这已经让我困惑了一段时间，我很感激任何人都能给予的帮助。

Answer 1

绑定事件处理程序

时，需要为DOM上不存在的元素使用委托事件

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

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

Answer 2

现有按钮在页面加载时获取其事件处理程序，但之后将新按钮添加到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文档中查找更多信息。

Answer 3

您可以委派您的活动。

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

这是一篇类似的帖子，我解释了bind live和“on”之间的区别。 How Jquery/Javascript behave on dynamic content updation?

基于类的按钮单击事件不会在动态创建的按钮上触发。

3 个答案: