Question

我只需要触发一次点击特定元素，可以在页面加载时间或将来动态添加。一些代码

此代码适用于在加载时呈现但不会将click事件绑定到动态添加的新元素的元素

$(".message-actions .accept").one("click", function(e){
    console.log("accept");
});

另一方面，如果我这样做，它会将事件绑定到新元素但不解除绑定事件，所以如果我再次点击它将打印相同的控制台日志

$("body").on("click", ".message-actions .accept", function(e){
    console.log("decline");
    $(this).unbind("click");
});

最后，如果我以其他方式执行此操作，它将仅在我点击的第一个元素中触发事件，即使有多个已加载或在之后添加。

$("body").one("click", ".message-actions .accept", function(e){
    console.log("decline");
});

我该怎么做？

由于

Answer 1

您可以向元素添加数据，以记住处理程序之前是否已运行：

$("body").on("click", ".message-actions .accept", function() {
    if (!$(this).data("run-once")) {
        console.log("decline");
        $(this).data("run-once", true); // Remember that we ran already on this element
    }
});

Answer 2

我会这样做：

 var handleClick = function () {
     // do your work
     alert("decline");

     // unbind
     $("body").off("click", ".message-actions .accept", handleClick);
 };

 $("body").on("click", ".message-actions .accept", handleClick);

选中此fiddle

Answer 3

如果符合您的具体情况，您可以这样解决：http://jsfiddle.net/hu4fp5qs/1/

$("body").on("click",".message-actions .accept",function(){
    $(this).removeClass("accept").addClass("decline");
    alert("Declined");
});

点击删除课程accept，然后添加课程decline。

这将有助于您对两种情况进行不同的样式设置，以便您可以区分它们。

.accept{
    background-color:green;
}

.decline{
    background-color:red;
}

jquery在静态和动态元素上只触发一次事件

3 个答案: