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

Posted 2023-05-09

【中文标题】由于rails资产，jQuery事件多次触发？

【英文标题】：jQuery event fired multiple times due to rails assets?

【发布时间】：2017-12-28 15:57:48

【问题描述】：

我查看了帖子 - 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)

【参考方案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       
    )
);  

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

【讨论】：

每次文件加载到文档就绪时，还是仅在单击按钮时才会发生“绑定”？有没有办法检查 JS 文件何时加载？

@linuxNoob 这将取决于您的 application.html 结构、您正在加载的视图、您如何加载对话框、您正在呈现的剩余 JS。如果您显示视图，您可能加载的“对话框”和剩余的 JS 是什么，包括“就绪”事件等，那么也许我们可以查明它

这里是 application.html.haml 的链接 - gist.github.com/anonymous/27dde6a9f5cb7dd13239ddb305eaf09b。剩下的 JS 中除了文档准备好和按钮点击没有其他事件。

我相信在图层下面，对话框是一个 Bootstrap JS 模式。