jQuery 單擊事件處理程序為復選框調用兩次
[英]jQuery click event handler is called twice for a checkbox
問題描述
我在 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" />
在瀏覽器 (FF3.5 / IE8) 中，我有以下問題：
- 如果我單擊復選框（小方塊），它會按預期工作
- 如果我單擊復選框的文本（“Checkbox XYZ”），則單擊事件會觸發兩次，並且警報會顯示兩次。
我想這與復選框呈現為 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>
如何正確設置單擊事件處理程序以防止它被調用兩次？
11 個解決方案
解決方案1
57 2009-12-04 12:21:00
我剛剛經歷了同樣的事情，但我不確定事件冒泡是否導致了我的問題。 我有一個自定義樹控件，當打開一個項目時，我使用$(id).click()將處理程序附加到某種類型的所有元素。
我懷疑這意味着其他地方已經有該事件的現有項目可能會再次添加它。 我發現解除綁定所有內容然后重新綁定解決了我的問題，因此：
$('img.load_expand').unbind("click").click(function()
{
// handler
});
解決方案2
21 2009-10-08 11:02:32
我認為這是因為帶有for屬性的<label>引發了點擊時關聯的<input type="radio">或<input type="checkbox">元素的點擊事件。
因此，在您的 jQuery 代碼中，您為<label>和<input>內的<span class="test">設置了一個單擊事件處理程序。 單擊<label> ，您在標簽上設置的單擊事件處理程序將執行，然后在<input>上設置的單擊事件處理程序將在標簽引發<input>上的單擊事件時執行。
解決方案3
15 2009-11-26 00:09:09
$(document).ready(function() {
$('.test').click(function(event) {
event.stopImmediatePropagation();
alert("Click");
})
}
);
我能夠通過停止事件傳播來讓我的代碼工作。 它不影響復選框的狀態變化。
解決方案4
11 已采納 2009-10-08 09:30:27
再次閱讀我的問題后，我找到了解決方法。
只需將“輸入”添加到 jQuery 選擇器：
<script type="text/javascript">
$(document).ready(function() {
$('.test input').click(function() {
alert("click")
})
});
</script>
解決方案5
3 2013-01-05 23:33:21
只需使用 .mouseup 而不是 .click
解決方案6
2 2009-10-08 09:56:58
你看到的是事件冒泡。 單擊事件首先由標簽處理，然后傳遞給復選框。 您每人都會收到一個警報。 為了防止事件冒泡，您需要在點擊處理程序中返回 false。
$(document).ready(function() {
$('.test').click(function() {
alert("Click");
return false;
})
});
然而，雖然這可以防止事件冒泡，但它也具有防止復選框更改狀態的不良副作用。 所以你需要圍繞它編碼。
解決方案7
2 2010-11-27 07:52:02
已解決：這適用於 Firefox 3.6.12 和 IE8。
$(function(){
$("form input:checkbox").unbind("click")
.click(function(){
val = $(this).val();
alert(val);
})
}
訣竅是unbind("click"). 在將其綁定到.click(fn) ； 這將禁用同一事件觸發兩次。
請注意，第一次選中復選框時，事件“更改”不會欺騙。 所以我改用“點擊”。
解決方案8
1 2013-12-30 22:52:25
我知道這個問題現在已經很接近了，但我剛剛遇到了同樣的問題，我想添加我找到的解決方案，可能會對未來的類似問題派上用場。
當您添加如下 ASP 代碼時：
<asp:CheckBox runat="server" Text="Checkbox XYZ" CssClass="test" ID="cb1" />
問題是<asp:CheckBox ...>不是 html 控件，它只是 ASP
由某些精神病人的扭曲思想組成的
東西，因此瀏覽器會收到其他東西。
瀏覽器會收到類似的信息：
<span class="test">
<input id="garbageforYourId_cb1" type="checkbox" name="garbage$moregarbage$cb1"/>
<label for="evenMoreGarbage_cb1">Checkbox XYZ</label>
</span>
許多可能的解決方案之一：
瀏覽器接收一個 span，其中包含一個輸入“復選框”和一個帶有文本的標簽。 因此，我對此的解決方案類似於：
$('.test > :checkbox').click(function() {
if ($(this).attr("checked")) {
alert("checked!!!");
} else {
alert("non checked!!!");
}
});
上面發生了什么？ 這個選擇器$('.test > :checkbox')意味着：找到類“test”的元素並帶上它包含的任何復選框。
解決方案9
1 2011-09-19 13:59:21
我在點擊事件時遇到了同樣的問題，並找到了這篇文章。 本質上，如果您在<body></body>標簽中有多個 jQuery 文檔就緒函數，您可以獲得多個事件。 當然，修復方法是不這樣做，或者解除單擊事件的綁定並重新綁定，如上所述。 有時，對於多個 javascript 庫，很難避免多個 document.ready()，因此取消綁定是一個很好的解決方法。
<code>
$('#my-div-id').unbind("click").click(function()
{
alert('only click once!');
}
</code>
解決方案10
0 2013-09-02 16:19:28
該函數運行兩次。 從內部調用一次，然后從內部再次調用它。 簡單地在最后添加一個 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" />
這對我來說非常有效。
解決方案11
0 2020-12-23 06:09:25
我在選擇器上遇到了同樣的問題。 並最終使用off()函數。
$('body').off('click').on('click', '<your selector>', function(){
// Your code
});
使用jQuery輸入時，更新面板中的Asp.net按鈕單擊事件處理程序執行兩次
[英]Asp.net button click event handler in update panel executes twice when enter with jquery
為什么有時我的onauthenticate事件處理程序被調用兩次？
[英]why my onauthenticate event handler being called twice sometimes?
動態將點擊事件添加到復選框，僅適用於第一個復選框JQUERY
[英]Dynamically adding click event to checkbox, only works for first checkbox JQUERY
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.