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

Question

我只需要在页面加载时间或将来动态添加的特定元素上单击一次即可。一些代码

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

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