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

Question

我对此代码有以下问题:

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

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

如果单击此按钮,警报将显示两次.它不仅仅是这个特定的按钮,而是我创建的每一个按钮.

我究竟做错了什么？

Answer 1

在这种情况下,我们可以做到以下几点

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

我最初发生了两次事件,当页面刷新时会发射四次.经过谷歌搜索后,经历了许多无效的工作.

我还必须说代码最初工作,直到我开始使用JQueryUI手风琴小部件.

Answer 2

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

你在示例之外有一些东西触发另一个.click(),检查还触发click该元素上的事件的其他处理程序.

Answer 3

我也经历过奇怪的行为.所以对我来说,"返回假"就是诀窍.

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

Answer 4

如果你使用

$( document ).ready({ })

要么

$(function() { });

不止一次,click函数将触发多次使用.

Answer 5

你可以试试这个.

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

Answer 6

这可以作为很好地兼具触发input和label 内部与点击收听的元素。

你点击label，这将触发click事件和以及对再点击一下事件input的label。这两个事件都冒泡到您的元素。

查看这支仅使用 CSS 的花哨切换笔：https : //codepen.io/stepanh/pen/WaYzzO

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

Answer 7

这可能是由于以下原因造成的：

1. 您在同一个 html 文件中多次包含该脚本
2. 您已经添加了两次事件侦听器（例如：onclick在元素上使用属性以及使用 jquery
3. 该事件冒泡到某个父元素。（您可以考虑使用event.stopPropagation）。
4. 如果您使用template inheritancelike extendsin Django，很可能您已将脚本包含在多个文件中，这些文件由include或extend模板标签组合在一起
5. 如果您使用的是Django模板，则您错误地将 a 放在了blockanother 中。

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

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

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

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