Jquery 仅针对子对象覆盖“单击”事件答案

【问题标题】：Jquery override 'click' event only for a child objectJquery 仅针对子对象覆盖“单击”事件
【发布时间】：2017-05-18 08:24:22
【问题描述】：

我有这个：

$('.parent').on('click', '.child1', function(event) {
// do whatever
});

$('.parent').on('click', '.child2', function(event) {
// do whatever
});

这很好用，即使两个“点击”事件都归因于父级，它也不会覆盖。现在该函数在我的页面上运行多次，效果与此相同：

$('.parent').on('click', '.child1', function(event) {
// do whatever
});

$('.parent').on('click', '.child1', function(event) {
// do whatever
});

运行两次时，事件不会覆盖，而是添加。因此，每次点击我都会让该功能运行 2 次。不是我想要的行为（只有 1 次执行），为了阻止他们复制事件，我通常会这样做：

$('.parent').off('click').on('click', '.child1', function(event) {
// do whatever
});

$('.parent').off('click').on('click', '.child2', function(event) {
// do whatever
});

在这种情况下，第二个 .off('click') 会从 .child1 中删除点击并覆盖，即使第二个仅与 .child2 而不是 .child1 相关。因此，换句话说，即使这两个事件都对 .parent 的不同子级的点击起作用，但如果我使用“关闭”技术，它们会覆盖。

我的问题是：如何只为一个特定的孩子覆盖一个事件，这样如果我两次运行相同的声明，它就不会重复该事件？

PS：我不能做 $('.child').click() 因为孩子是动态加载的，所以我需要在静态 .parent 上附加事件。

【问题讨论】：

您不能覆盖事件处理程序
这似乎是一个 XY 问题。您是在询问有缺陷的解决方案，而不是说明您要解决的问题。你需要达到什么样的行为？
没有办法定位所需的孩子并点击它吗？我看到您想为特定元素执行此操作，以便您可以添加类或属性以帮助定位
IMO，多次定义.on("click") 是一个糟糕的设计。只需在脚本顶部定义一次，而不是尝试取消它然后重新绑定它多次。它是委托的，所以它甚至可以在动态添加的元素上工作，所以你只需要绑定一次。
在这种情况下，好的设计在静态网站上效果很好。对于动态元素，你可能需要重新绑定一些东西，这就是为什么它可能被称为多次。

标签： javascript jquery

【解决方案1】：

希望这会有所帮助：

$(document).off('click','.parent').on('click', '.child1', function(event) {
    alert("click1");
});

$(document).off('click','.parent').on('click', '.child2', function(event) {
alert("click2");
});

【讨论】：