这段代码有以下问题：
<button id="delete">Remove items</button>
$("#delete").button({
icons: {
primary: 'ui-icon-trash'
}
}).click(function() {
alert("Clicked");
});
如果我单击此按钮，警报会显示两次。不仅仅是这个特定的按钮，还有我创建的每一个按钮。
我做错了什么？
【问题讨论】：
标签： jquery function button click
您当前的代码有效，您可以在这里尝试：http://jsfiddle.net/s4UyH/
您在示例之外有触发另一个.click() 的内容，请检查也在该元素上触发click 事件的其他处理程序。
【讨论】：
在这种情况下，我们可以这样做
$('selected').unbind('click').bind('click', function (e) {
do_something();
});
我最初触发了两次事件，当页面刷新时它触发了四次。过了好几个小时，我才通过谷歌搜索找到答案。
我还必须说，在我开始使用 JQueryUI 手风琴小部件之前，代码最初是可以工作的。
【讨论】：
$('.element').unbind("click").on('click', function(e) { ... });
我也经历过奇怪的行为。所以对我来说，“return false”成功了。
$( '#selector' ).on( 'click', function() {
//code
return false;
});
【讨论】：
我发现在多次发生的函数中绑定 element.click 会使它排队，因此下次单击它时，它将触发与绑定函数执行次数一样多的次数。新人的错误可能在我这边，但我希望它有所帮助。 TL、DR：确保将所有点击都绑定在只发生一次的设置函数上。
【讨论】：
如果你使用
$( document ).ready({ })
或
$(function() { });
不止一次，点击功能会触发多次。
【讨论】：
我遇到了同样的问题并尝试了所有方法，但没有成功。所以我使用了以下技巧：
function do_stuff(e)
{
if(e){ alert(e); }
}
$("#delete").click(function() {
do_stuff("Clicked");
});
您检查该参数是否不为空，而不是检查代码。因此，当该功能第二次触发时，它会显示您想要的内容。
【讨论】：
你可以试试这个。
$('#id').off().on('click', function() {
// function body
});
$('.class').off().on('click', function() {
// function body
});
【讨论】：
就像尼克想说的那样，外部的某些东西触发了两次事件。要解决这个问题，您应该使用 event.stopPropagation() 来防止父元素冒泡。
$('button').click(function(event) {
event.stopPropagation();
});
我希望这会有所帮助。
【讨论】：
就我而言，我是这样使用更改命令的
$(document).on('change', '.select-brand', function () {...my codes...});
然后我改变了方式
$('.select-brand').on('change', function () {...my codes...});
它解决了我的问题。
【讨论】：
这也可以通过将input 和label 包含在带有点击监听器的元素中来触发。
您点击label，触发点击事件，以及在input 上为label 触发另一个点击事件。这两个事件都会冒泡到您的元素中。
查看这支精美的纯 CSS 切换笔：https://codepen.io/stepanh/pen/WaYzzO
注意：这不是特定于 jQuery 的，本机侦听器被触发 2 倍，并在笔中显示。
【讨论】：
$("#id").off().on("click", function() {
});
为我工作。
$("#id").off().on("click", function() {
});
【讨论】：
这可能是由以下原因引起的：
onclick 属性以及 jqueryevent.stopPropagation）。Django 中使用template inheritance （如extends），很可能您已将脚本包含在多个文件中 由include 或extend 模板标签组合在一起Django 模板，您错误地将block 放置在另一个模板中。因此，您应该找出它们并删除重复的导入。这是最好的做法。
另一种解决方案是首先在脚本中删除所有 click 事件侦听器，例如：
$("#myId").off().on("click", function(event) {
event.stopPropagation();
});
如果你确定事件没有冒泡，你可以跳过event.stopPropagation();。
【讨论】：
除非您希望您的按钮成为提交按钮，否则将其编码为 删除项目 那应该可以解决您的问题。 如果您不指定按钮元素的类型，它将默认为提交按钮，从而导致您发现的问题。
【讨论】：
与 Stepan 的回答有关。
在我的情况下，我的.click() 监听器中有input 和label。
我刚刚将label 替换为div，它成功了！
【讨论】：
如果你使用 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)
【讨论】：
另一种可能性：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()。将点击处理程序设为一个函数，并且都直接从事件处理程序中调用该函数
【讨论】：
我遇到了同样的问题，得到了导师的帮助
$('#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
修复【讨论】：