由于rails资产，jQuery事件多次触发？

Question

我查看了帖子 - jQuery click events firing multiple times 和 why is jQuery click event firing multiple times，但我仍然无法弄清楚为什么会发生这种情况。

我正在开发一个rails-4.2.9 应用程序并有一个自定义.js 如下：

$(function() {
    var $addNotificationButton = $('#add-notification-button')
    $addNotificationButton.on('click', function()
    {
      console.log("hi from js")
      //Code for launching a dialog       
    })
});  

现在，当第一次加载页面并第一次单击按钮时，我只看到一条打印语句，并看到对话框以新的route 启动。当我关闭对话框并重新单击按钮时，我可以在控制台上看到 2 个打印语句，下一次是 3 个，依此类推。

我的.js 被放在Application.js 中，在控制台上我看到来自Application.js 的一个打印语句，但正在添加的其他语句来自Chrome 中的VM-2058.js 和@ 中的foundation.js 987654333@。我不确定这些是在哪里或如何弹出的。

我的问题是：

1) 为什么会这样？我认为打印语句只会在单击按钮时执行。 jquery 事件处理程序不是这样工作的吗？

2) 虽然我可以使用one 而不是on 来阻止它，但我的一位同事提到我们不应该使用one，因为它会在第一次单击后将事件与按钮解除绑定，而是查看只加载controller 所需的.js。现在这也有效，但我们应该这样做吗？我意识到这是一个与rails assets 相关的问题。

我的application.js 看起来像这样：

//= require_tree .
//= require ./notification (refers to the .js file above)

Answer 1

问题是您正在设置多个 ".on('click'..)" 处理程序。我不确定您的代码的其余部分，但必须调用/重新加载 JS 文件并多次执行该匿名函数，每次向event 添加一个“绑定”。这就是为什么它会随着点击次数的增加而增加？也许您的对话框会再次加载 JS？不确定。

如果你这样做：

$(function() {
    var $addNotificationButton = $('#add-notification-button')
    $addNotificationButton.off('click').on('click', function()
    {
      console.log("hi from js")
      //Code for launching a dialog       
    })
});  

它应该可以按您的预期工作，但它会取消绑定任何现有的“点击”事件（因此，如果您绑定了其他内容，则需要重新绑定）。