【问题标题】:jQuery: Single button click, click event firing two or more timesjQuery:单击单个按钮,单击事件触发两次或更多次
【发布时间】:2011-01-08 20:20:39
【问题描述】:

我有 HTML 输入和按钮元素。我使用按钮提交表单、打开辅助窗口等。问题是,单击会变成 2 个(有时更多)表单提交,或者打开两个额外的浏览器窗口。我已经在多个网络浏览器中重现了这个问题。我尝试过切换 jQuery 版本,但并没有改变任何东西。什么可能导致这种事情发生?

【问题讨论】:

  • 你可能做错了。请在jsbin.com 上发布一些代码或版本,以便我们为您提供帮助。
  • 是的,您肯定需要发布您的代码,否则我们没有机会提供帮助。
  • 我遇到了同样的问题,没有一个解决方案有效,因为在我的情况下,确认(“..”)函数调用了 1 个弹出窗口,并且当时按下回车会导致“确定”和在后台对所选项目执行 1 次操作。有什么帮助吗?

标签: jquery events


【解决方案1】:

您的问题可能正在发生,因为您多次将同一个处理程序分配给单击事件。我建议您检查分配处理程序的行是否被无意中多次调用。另一种解决方案可能是首先调用unbind(已弃用3.0)或off(已取代):

$("#myButton").unbind("click").click(myHandler); // deprecated
$("#myButton").off("click").click(myHandler); // superseeded

但没有看到一些代码,我只是在猜测。

【讨论】:

  • 非常简单的答案!
  • 为什么要使用unbind?它只是调用 .off(): jQuery.fn.unbind.toSource()"(function (a,b){return this.off(a,null,b)})"
  • @NoBugs 因为答案几乎是 7 年前写的 :)
【解决方案2】:

鉴于您没有提供很多信息,我可以推荐的最好的方法是查看 one()

http://api.jquery.com/one/

【讨论】:

    【解决方案3】:

    jQuery Sparkle 为此提供了一个简洁优雅的解决方案,通过“一次”调用函数,您可以只将处理程序绑定到事件一次。

    这是对 Darko Z 建议的重要改进:

    $("#myButton").unbind("click").click(myHandler);
    

    每次调用“click”事件时,将取消绑定与“click”事件关联的任何其他“click”处理程序。所以你确实确保它只绑定一次,但是你不小心解开了其他所有东西!哎呀!

    jarrett 的建议是在“click”处理程序被调用后立即解除绑定,因此如果您希望再次调用该处理程序(在它初始触发之后),您将不得不重新绑定该处理程序。

    使用 jQuery Sparkle 的 once 将允许处理程序根据需要触发多次,但只能绑定一次而不是多次。你可以这样使用它:

    $('#myButton').once('click', function(){
        // my handler
    });
    

    或者,如果您想在回调中支持数据,就像 jQuery 内置的“绑定”一样,那么您可以使用:

    $('#myButton').once('click', data, function(){
        // my handler
    });
    

    你可以找到定义一次函数here的源代码。

    它是在 AGPL 许可下开源的,因此您可以放心地从中获取您需要的东西,无需担心! :-) 它每天都在积极开发,因此您永远不会缺少支持。

    但最重要的是,它是一个 DRY 插件/效果框架,可让您更轻松地开发插件和扩展。所以希望这有助于实现这一目标!

    【讨论】:

    • 我知道这是旧的,但这个答案促使我纠正解决方案.. 在今天的 jQuery 版本中,我使用了 .one 绑定函数,我的问题得到了解决
    【解决方案4】:

    对我来说这是由

    $(function() {
        $('.some-element').click(function() {
            //event that fires twice
        });
    
        //some exception-throwing code here
    });
    

    由于异常,jQuery 调用了两次匿名就绪函数(?!),因此 click 函数将被绑定两次。

    【讨论】:

      【解决方案5】:

      你可以使用one():

      $("div").one("click", function(e) { ... });
      

      将处理程序附加到元素的事件。每个元素最多执行一次处理程序。

      【讨论】:

        【解决方案6】:

        这会很好用。 它对我有用。

        $(".class-name").unbind().click(function() {
            //Do the Stuff
        });
        

        【讨论】:

          【解决方案7】:

          因为我最初使用 $('#myButton').on('click'... 来分配我的听众,所以在它为我工作之前调用这样的东西。

          $('#myButton').off();
          

          Documentation for "off();"

          【讨论】:

            【解决方案8】:

            我遇到了模式对话框窗口的问题。每次我在会话中打开一个对话框时,该事件都会触发一次。第一个窗口没问题,第二个窗口触发两次,第三个窗口触发三次,以此类推。

            我发现每次在同一个会话中打开一个新的对话框窗口时,都会调用对话框的初始化函数。我添加了一个全局变量 notInit = -1 并在运行 init 时将值赋值为 1。我在运行 init 函数之前检查了 notInit 的值,并且只有在值为 -1 时才继续执行 init。

            【讨论】:

            • 这听起来像是我想实现的东西,但我不确定步骤语法。如果不是写太多,你会在你的答案中提供一个代码sn-p吗?
            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2013-02-04
            • 2018-11-08
            • 1970-01-01
            • 2014-08-08
            • 2017-12-19
            • 1970-01-01
            相关资源
            最近更新 更多