Javascript 为什么要以增量方式从一次单击注册多次单击？

我遇到了一个意想不到的问题。但我们不都是吗？第一篇帖子，感谢社区

目标：在

中，使用

onclick=“$（this）.on（'click'，function（）{console.log（'foo'）}）；”

，
我想使同级div

切换（）

。我为此编写了单独的代码，它将替换我这里的

console.log（）

，但是当我用console.log测试它时，我注意到开发工具中发生了一些奇怪的事情

• 每次单击都会注册多个日志
• 每增加一次单击，将比上一次单击多增加一次单击。令人困惑事情是这样的：
• 第一次单击：未对控制台进行日志记录
• 第二次单击：2个控制台日志
• 第三次单击：3个控制台日志（共5个）
• 第四次单击：4个控制台日志（共9个）
• 第5次点击：5个控制台日志（共14个）

我不知道是什么导致了这一切？当我将

console.log

替换为

$（differentitdiv）.toggle（）

时，动画的行为非常奇怪，我假设是由于这些多次单击

---

注：我知道最佳实践并不推荐这种方法，但我公司的CMS非常有限，需要这些类型的实践。此外，我试图避免使用单独的

标记，因为CMS使我的非web开发人员同事很难单独输入javascript。谢谢你的建设性意见。

这是一个有趣的bug！现在，每次单击都会再添加一个单击处理程序。因此，对于第一次单击，没有单击处理程序。单击按钮，代码将运行，现在您有了一个单击处理程序。在随后的每次单击中，您将添加另一个处理程序，单击按钮时，每个处理程序都将运行

或者只执行console.log/函数调用：

onClick="console.log('foo')"

或者，单独绑定单击处理程序

<button id="myButton" />
<script>
    $('#myButton').on('click', function() { console.log('foo') });
</script>

$（'#myButton'）。on（'click'，function（）{console.log（'foo'）}）；

始终发布完整的代码，以便其他开发人员可以复制并轻松查看您的问题。看起来，每次单击都会添加一个额外的事件侦听器。去掉onclick并将$（'element'）.on（'click'，function（）…移动到$（document）.ready（）中Wrapper这就是为什么您不应该将事件绑定到其他事件中。我知道最佳实践不推荐这种方法，但我公司的CMS非常有限，需要这些类型的实践。此外，我正试图避免单独的标记，因为CMS使我的非web开发的同事很难使用操作分别输入javascript。我之所以尝试这种方法是有原因的。谢谢你的输入！我很惊讶我以前没有遇到过这种情况。这真的像你说的那样是一个bug，还是这是我应该知道的？我实际上使用你的单独单击处理程序建议有一些功能，并且我已经编写了20个唯一的ID，因为有有人问，如果我想要100个div，它们是否都需要编写自己的处理程序？我正在使用

这个
选择器尝试内联onclick，以找到一种方法来生成可以独立于单独脚本的元素。所谓bug，我的意思是它不是按照您认为/预期的方式工作。在语言级别上不会遇到许多真正的“bug”。请检查事件绑定在jQuery中的工作方式。您可以为每个div提供相同的类，然后将一个事件绑定到类
$（'.myClass'）。on（'click'…
调用click处理程序时，jQuery将该函数中的
this
设置为单击的div。仅为了内联它，请尝试
onClick=“$（this）.toggle（'className'）”
当您这样内联它时，不需要重新绑定它，当单击按钮时，该代码将运行。将尝试简化它并删除额外的事件。感谢您的帮助！