javascript 为什么 jQuery click 事件多次触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22180953/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
why is jQuery click event firing multiple times
提问by iambdot
I have this sample code here http://jsfiddle.net/DBBUL/10/
我在这里有这个示例代码 http://jsfiddle.net/DBBUL/10/
$(document).ready(function ($) {
$('.creategene').click(function () {
$('#confirmCreateModal').modal();
$('#confirmCreateYes').click(function () {
$('#confirmCreateModal').modal('hide');
var test = "123";
alert(test);
console.log(test);
});
});
});
If you click the create button 3 times and each time you click yes on the confirmation, the alert is fired multiple times for each click instead of just one time.
如果您单击创建按钮 3 次，每次单击确认时单击是，每次单击都会触发多次警报，而不是一次。
If you click the create button 3 times and each time you click no and on the 4th time you click yes the alert is fired for each of the previous clicks instead of just one time.
如果您单击创建按钮 3 次，每次单击“否”，第四次单击“是”，则会为之前的每次单击而不是一次单击触发警报。
this behavior seems weird to me as i would expect the alert to be fired once per click. Do I have to use .unbind() or is there a better solution?
这种行为对我来说似乎很奇怪，因为我希望每次点击都会触发一次警报。我必须使用 .unbind() 还是有更好的解决方案？
Could someone please tell me why this is happening and how to fix it?
有人可以告诉我为什么会发生这种情况以及如何解决吗？
Thanks
谢谢
回答by Kevin B
Because you are binding it multiple times. Click event inside a click event means every time you click, a new click event is being bound on top of the previously bound events. Do not bind click events inside of click events unless the click event creates the element. There's also no need to re-initialize the modal over and over.
因为你多次绑定它。单击事件内的单击事件意味着每次单击时，都会在先前绑定的事件之上绑定一个新的单击事件。除非单击事件创建元素，否则不要在单击事件内部绑定单击事件。也无需一遍又一遍地重新初始化模态。
$(document).ready(function ($) {
$('#confirmCreateModal').modal({show: false});
$('#confirmCreateYes').click(function () {
$('#confirmCreateModal').modal('hide');
var test = "123";
alert(test);
console.log(test);
});
$('.creategene').click(function () {
$('#confirmCreateModal').modal('show');
});
});
回答by Anoop Joshi
change the code like this
像这样更改代码
$(document).ready(function ($) {
$('.creategene').click(function () {
$('#confirmCreateModal').modal();
});
$('#confirmCreateYes').click(function () {
$('#confirmCreateModal').modal('hide');
var test = "123";
alert(test);
console.log(test);
});
});
You dont have to bind $('#confirmCreateYes').clickin each button click.
您不必$('#confirmCreateYes').click在每次单击按钮时进行绑定。
回答by sajalsuraj
You can try this also -
你也可以试试这个——
$("#confirmCreateYes").unbind().click(function() {
//Stuff
});
回答by kylealonius
Add this to your code:
将此添加到您的代码中：
$( "#confirmCreateYes").unbind( "click" );
Like this:
像这样：
$(document).ready(function ($) {
$('.creategene').click(function () {
$('#confirmCreateModal').modal();
$('#confirmCreateYes').click(function () {
$('#confirmCreateModal').modal('hide');
var test = "123";
alert(test);
console.log(test);
$( "#confirmCreateYes").unbind( "click" );
});
});
});
});
It will unbind the event, so that it isn't bound on top of the previous event. This allows the event only to fire within the original click event.
它将取消绑定事件，因此它不会绑定在前一个事件之上。这允许事件仅在原始点击事件内触发。
This is not a good method. It will unbind all click events attached to the element. I will leave it here for learning purposes.
这不是一个好方法。它将取消绑定到元素的所有点击事件。我将把它留在这里以供学习之用。
