jQuery 单击事件处理程序为复选框调用两次
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1536660/
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
jQuery click event handler is called twice for a checkbox
提问by M4N
I have a problem with the following code in an ASPX page:
我在 ASPX 页面中遇到以下代码问题：
<script type="text/javascript">
$(document).ready(function() {
$('.test').click(function() {
alert("click")
})
});
</script>
<asp:CheckBox runat="server" Text="Checkbox XYZ" CssClass="test" ID="cb1" />
In the browser (FF3.5 / IE8) I have the following problem:
在浏览器 (FF3.5 / IE8) 中，我有以下问题：
- if I click the checkbox (the small square), it works as expected
- if I click the checkbox's text ("Checkbox XYZ"), then the click event is fired twice, and the alert is shown twice.
- 如果我单击复选框（小方块），它会按预期工作
- 如果我单击复选框的文本（“Checkbox XYZ”），则单击事件会触发两次，并且警报会显示两次。
I guess this has to do with the way the checkbox is rendered to HTML, which is like this:
我想这与复选框呈现为 HTML 的方式有关，如下所示：
<span class="test">
<input id="ctl00_c1_cb1" type="checkbox" name="ctl00$c1$cb1" checked="checked"/>
<label for="ctl00_c1_cb1">Checkbox XYZ</label>
</span>
How do I correctly setup the click event handler to prevent it from being called twice?
如何正确设置单击事件处理程序以防止它被调用两次？
采纳答案by M4N
Well after reading my question again, I found a way how to solve it.
再次阅读我的问题后，我找到了解决方法。
Just add "input" to the jQuery selector:
只需将“输入”添加到 jQuery 选择器：
<script type="text/javascript">
$(document).ready(function() {
$('.test input').click(function() {
alert("click")
})
});
</script>
回答by halfer
I have just experienced the same thing, but am not sure that event bubbling is causing my issue. I have a custom tree control, and when an item is opened, I use $(id).click()to attach a handler to all elements of a certain kind.
我刚刚经历了同样的事情，但我不确定事件冒泡是否导致了我的问题。我有一个自定义树控件，当打开一个项目时，我$(id).click()用来将处理程序附加到某种类型的所有元素。
I suspect that this means that existing items elsewhere that already have the event, may then have it added again. I found that unbinding everything then re-binding solved my problem, thus:
我怀疑这意味着其他地方已经有该事件的现有项目可能会再次添加它。我发现解除绑定所有内容然后重新绑定解决了我的问题，因此：
$('img.load_expand').unbind("click").click(function()
{
// handler
});
回答by Russ Cam
I think it's because a <label>with a forattribute raises the click event of <input type="radio">or <input type="checkbox">element that is associated for when clicked.
我认为这是因为<label>带有for属性的a引发了单击时关联的<input type="radio">或<input type="checkbox">元素的单击事件。
So in your jQuery code, you set up a click event handler for both the <label>and the <input>inside <span class="test">. When clicking on the <label>, the click event handler that you set up on the label will execute, then the click event handler set up on the <input>will execute when the label raises the click event on the <input>.
因此，在您的 jQuery 代码中，您为 the<label>和<input>inside设置了一个单击事件处理程序<span class="test">。单击 时<label>，您在标签上设置的单击事件处理程序将执行，然后<input>当标签在 上引发单击事件时，将执行在上设置的单击事件处理程序<input>。
回答by Juma
$(document).ready(function() {
$('.test').click(function(event) {
event.stopImmediatePropagation();
alert("Click");
})
}
);
I was able to get my code working by stopping the event Propagation. It did not affect the status change of the checkbox.
我能够通过停止事件传播来让我的代码工作。它不影响复选框的状态变化。
回答by yoshyosh
Just use .mouseup rather than .click
只需使用 .mouseup 而不是 .click
回答by aifarfa
Solved:this to work with Firefox 3.6.12 and IE8.
已解决：这适用于 Firefox 3.6.12 和 IE8。
$(function(){
$("form input:checkbox").unbind("click")
.click(function(){
val = $(this).val();
alert(val);
})
}
The trick is to unbind("click").before bind it to .click(fn); this will disabled the same event to fire twice.
诀窍是unbind("click").在将其绑定到.click(fn); 这将禁用同一事件触发两次。
Note that event "change" will not tricker at first time checkbox has been checked. So I use "click" instead.
请注意，第一次选中复选框时，事件“更改”不会欺骗。所以我改用“点击”。
回答by Andrew
What you are seeing is event bubbling. The click event is first handled by the label and is then passed on to the checkbox. You get one alert for each. To prevent event bubbling you need to return false in your click handler.
你看到的是事件冒泡。单击事件首先由标签处理，然后传递给复选框。您每人都会收到一个警报。为了防止事件冒泡，您需要在点击处理程序中返回 false。
$(document).ready(function() {
$('.test').click(function() {
alert("Click");
return false;
})
});
However while this prevents event bubbling it also has the undesirable side effect of preventing the checkbox from changing state. So you'll need to code around that.
然而，虽然这可以防止事件冒泡，但它也具有防止复选框更改状态的不良副作用。所以你需要围绕它编码。
回答by MontyThreeCard
I ran into the same issue with a click event, and found thisarticle. In essence, if you have more than one jQuery document-ready functions inside the
<body></body>tags, you can get multiple events. The fix is, of course, to not do that, or to unbind the click event and rebind it, as noted above. Sometimes, with multiple javascript libraries, it can be hard to avoid multiple document.ready()'s, so the unbind is a good workaround.
我在点击事件时遇到了同样的问题，并找到了这篇文章。本质上，如果<body></body>标签中有多个 jQuery 文档就绪函数
，则可以获得多个事件。当然，修复方法是不这样做，或者解除单击事件的绑定并重新绑定，如上所述。有时，对于多个 javascript 库，很难避免多个 document.ready()，因此取消绑定是一个很好的解决方法。
<code>
$('#my-div-id').unbind("click").click(function()
{
alert('only click once!');
}
</code>
回答by Oaxas
I know the question is far closed now, but I just have faced the same problem and I want to add the solution I found, may come in handy for similar problems on the future.
我知道这个问题现在已经很接近了，但我刚刚遇到了同样的问题，我想添加我找到的解决方案，可能会对未来的类似问题派上用场。
When you add ASP code like:
当您添加如下 ASP 代码时：
<asp:CheckBox runat="server" Text="Checkbox XYZ" CssClass="test" ID="cb1" />
the problem is that <asp:CheckBox ...>is not an html control, it's just something ASP made up from the twisted mind of some psychoinvented, so the browser will receive something else.
问题是它<asp:CheckBox ...>不是一个 html 控件，它只是 ASP 由一些精神病人的扭曲思想组成的东西，所以浏览器会收到其他东西。
The browser will receive something like:
浏览器会收到类似的信息：
<span class="test">
<input id="garbageforYourId_cb1" type="checkbox" name="garbage$moregarbage$cb1"/>
<label for="evenMoreGarbage_cb1">Checkbox XYZ</label>
</span>
One of many possible solutions:
许多可能的解决方案之一：
The browser receive a span which content an input "checkbox" and a label for it with your text. Therefore my solution for this would be something like:
浏览器接收一个 span，其中包含一个输入“复选框”和一个带有文本的标签。因此，我对此的解决方案类似于：
$('.test > :checkbox').click(function() {
if ($(this).attr("checked")) {
alert("checked!!!");
} else {
alert("non checked!!!");
}
});
What happened up there? This selector $('.test > :checkbox')means: find the elements with the class "test" and bring any checkbox that it contains.
上面发生了什么？这个选择器的$('.test > :checkbox')意思是：找到类“test”的元素并带上它包含的任何复选框。
回答by Kalob Taulien
The function runs twice. Once from the inside and then it gets called again from inside itself. Simple add a return statement at the end.
该函数运行两次。从内部调用一次，然后从内部再次调用它。简单地在最后添加一个 return 语句。
<script type="text/javascript">
$(document).ready(function() {
$('.test').click(function() {
alert("click");
return false;
})
});
</script>
<asp:CheckBox runat="server" Text="Checkbox XYZ" CssClass="test" ID="cb1" />
This worked perfectly for me.
这对我来说非常有效。
