jQuery Button.click() 事件被触发两次

Posted 2023-02-19

【中文标题】jQuery Button.click() 事件被触发两次

【英文标题】：jQuery Button.click() event is triggered twice

【发布时间】：2011-03-05 11:10:48

【问题描述】：

这段代码有以下问题：

<button id="delete">Remove items</button>

$("#delete").button(
     icons: 
             primary: 'ui-icon-trash'
     
).click(function() 
     alert("Clicked");
);

如果我单击此按钮，警报会显示两次。不仅仅是这个特定的按钮，还有我创建的每一个按钮。

我做错了什么？

【问题讨论】：

jQuery click events firing multiple times的可能重复

【参考方案1】：

您当前的代码有效，您可以在这里尝试：http://jsfiddle.net/s4UyH/

您在示例之外有触发另一个.click() 的内容，请检查也在该元素上触发click 事件的其他处理程序。

【讨论】：

你是对的！我在 .click() 前面放了一个 .unbind("click")。现在它工作正常。我要再次搜索触发事件的元素...非常感谢！

这听起来更像是你绑定了同一个点击事件两次。 jQuery 将对绑定进行排队，因此如果您将多个单击事件绑定到同一个元素，当您单击它时，它们都会触发。细微的差别是 click 事件被触发了两次，而同一个 click 事件绑定到元素两次。

@user276289 - 您的整个代码可能运行了多次，请确保它只包含在页面中一次。

感谢尼克·克拉弗！这正是我的问题，我将代码内联在一个 jQuery 对话框中，因此在呈现 jQuery UI 对话框时再次执行它。

这是正确的答案。很多时候，重复加载同一个 JS 文件也会导致这个错误。

【参考方案2】：

在这种情况下，我们可以这样做

$('selected').unbind('click').bind('click', function (e) 
  do_something();
);

我最初触发了两次事件，当页面刷新时它触发了四次。过了好几个小时，我才通过谷歌搜索找到答案。

我还必须说，在我开始使用 JQueryUI 手风琴小部件之前，代码最初是可以工作的。

【讨论】：

这个变种也有效：$('.element').unbind("click").on('click', function(e) ... );

正是我想要的。也可以确认@RosdiKasim 的评论是正确的——这就是我所使用的。

这是我一直在寻找的答案，并在 5 分钟内得到了它。谢谢

【参考方案3】：

我也经历过奇怪的行为。所以对我来说，“return false”成功了。

        $( '#selector' ).on( 'click', function() 
            //code
            return false;
        );

【讨论】：

谢谢！在我的情况下，我无法取消绑定或关闭我的事件处理程序，而只是简单地返回 false 工作！

这对我也有用，但我想知道为什么。

看看 Noor 的回答。

这对我有用。点击不会被多次触发。但是，如果单击绑定到复选框，则不会检查单击事件。

同样的事情发生在我身上，处理一个复选框点击，这个答案解决了我的问题

【参考方案4】：

我发现在多次发生的函数中绑定 element.click 会使它排队，因此下次单击它时，它将触发与绑定函数执行次数一样多的次数。新人的错误可能在我这边，但我希望它有所帮助。 TL、DR：确保将所有点击都绑定在只发生一次的设置函数上。

【参考方案5】：

如果你使用

$( document ).ready( )

或

$(function()  );

不止一次，点击功能会触发多次。

【讨论】：

这个修复了我的问题。

【参考方案6】：

我遇到了同样的问题并尝试了所有方法，但没有成功。所以我使用了以下技巧：

function do_stuff(e)

    if(e) alert(e); 

$("#delete").click(function() 
    do_stuff("Clicked");
);

您检查该参数是否不为空，而不是检查代码。因此，当该功能第二次触发时，它会显示您想要的内容。

【参考方案7】：

你可以试试这个。

    $('#id').off().on('click', function() 
        // function body
    );
    $('.class').off().on('click', function() 
        // function body
    );

【参考方案8】：

就像尼克想说的那样，外部的某些东西触发了两次事件。要解决这个问题，您应该使用 event.stopPropagation() 来防止父元素冒泡。

$('button').click(function(event) 
    event.stopPropagation();
);

我希望这会有所帮助。

【讨论】：

这对我不起作用。导致点击被多次触发的原因。

【参考方案9】：

就我而言，我是这样使用更改命令的

$(document).on('change', '.select-brand', function () ...my codes...);

然后我改变了方式

$('.select-brand').on('change', function () ...my codes...);

它解决了我的问题。

【参考方案10】：

这也可以通过将input 和label 包含在带有点击监听器的元素中来触发。

您点击label，触发点击事件，以及在input 上为label 触发另一个点击事件。这两个事件都会冒泡到您的元素中。

查看这支精美的纯 CSS 切换笔：https://codepen.io/stepanh/pen/WaYzzO

注意：这不是特定于 jQuery 的，本机侦听器被触发 2 倍，并在笔中显示。

【讨论】：

那么，应该如何解决这个问题？这是我的场景

【参考方案11】：

$("#id").off().on("click", function() 

);

为我工作。

$("#id").off().on("click", function() 

);

【讨论】：

也为我工作。

为什么会这样？我想知道。我有一个下载按钮，第一次点击会触发一次，第二次点击会触发两次……

【参考方案12】：

这可能是由以下原因引起的：

您在同一个 html 文件中多次包含脚本 您已经添加了两次事件监听器（例如：在元素上使用 onclick 属性以及 jquery 事件冒泡到某个父元素。 （您可以考虑使用event.stopPropagation）。 如果您在Django 中使用template inheritance （如extends），很可能您已将脚本包含在多个文件中 由include 或extend 模板标签组合在一起 如果您使用的是Django 模板，您错误地将block 放置在另一个模板中。

因此，您应该找出它们并删除重复的导入。这是最好的做法。

另一种解决方案是首先在脚本中删除所有 click 事件侦听器，例如：

$("#myId").off().on("click", function(event) 
event.stopPropagation();
);

如果你确定事件没有冒泡，你可以跳过event.stopPropagation();。

【讨论】：

感谢您在回答中包含明显的 #1。我不敢相信我没有意识到这是怎么回事。 （捂脸）

【参考方案13】：

除非您希望您的按钮成为提交按钮，否则将其编码为 删除项目 那应该可以解决您的问题。 如果您不指定按钮元素的类型，它将默认为提交按钮，从而导致您发现的问题。

【讨论】：

抱歉 - 上传异常。只需在你的按钮标签中添加 type="button" 就可以了。

【参考方案14】：

与 Stepan 的回答有关。

在我的情况下，我的.click() 监听器中有input 和label。

我刚刚将label 替换为div，它成功了！

【参考方案15】：

如果你使用的是 AngularJS：

如果你使用 AngularJS 并且你的 jQuery 点击事件是 INSIDE THE CONTROLLER，它会被 Angular 的框架本身干扰并触发两次。要解决此问题，请将其移出控制器并执行以下操作：

// Make sure you're using $(document), or else it won't fire.
$(document).on("click", "#myTemplateId #myButtonId", function () 
   console.log("#myButtonId is fired!");
   // Do something else.
);

angular.module("myModuleName")
   .controller("myController", bla bla bla)

【参考方案16】：

另一种可能性：2 个事件的“isTrusted”值不同。

我刚刚遇到了这个问题。 在做了一点调试后，我发现这两个事件的“isTrusted”值不同。

---

条件：

我在另一个InputBox 的“keydown”事件处理程序中调用了element.click()。 keydown 后，element 收到一对事件，一个是“isTrusted:true”，另一个是“isTrusted:false”

根据 MDN (https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted)，isTrusted 用于确定事件是用户触发 (true) 还是程序触发 (false)。

---

解决方案：

一个。更好地处理双重触发并在您的用例中按状态阻止第二个事件

b.选择您想要用户触发还是程序触发

c。不要使用 click()。将点击处理程序设为一个函数，并且都直接从事件处理程序中调用该函数

【参考方案17】：

我遇到了同样的问题，得到了导师的帮助

$('#button_id').click($.debounce(250, function(e) 
     e.preventDefault();
     var cur = $(this);
     if ($(cur).hasClass('btn-primary')) 
          //do something
      else 
          // do something else 
     
 ));

myIssue 当按钮被点击时 hasClass 立即显示 true 它变为 false 并且其他部分通过使用 debounce

修复