我有一段簡單的代碼，可以在選中復選框時顯示資訊 div，如果未選中則隱藏該 div。在構建時，我遇到了一個無法找到任何資訊來解決的問題。為了簡化問題，我有一個 if 陳述句，如果輸入被檢查，它會記錄“檢查”。如果未選中，它將記錄“未選中”。
$("#my-id") 是一個 div，其中包含一個帶有復選框輸入的標簽
<div id='my-id'>
<span>
<label>
<input type="checkbox">
test
</label>
</span>
</div>
所以點擊它會選擇和取消選擇復選框輸入。
$("#my-id").unbind('click').click(function(){
if($(this).find('input').is(':checked')){
console.log('checked');
}
else {
console.log('not checked');
}
});
我一鍵在日志中看到的是：
not checked
checked
然后當我再次單擊同一個時，顯示
checked
not checked
這混淆了 slideUp() 和 slideDown() 函式，因為它們最終會被呼叫兩次，而且我的頁面有部分上下滑動。任何見解將不勝感激。我確定有一些關于 JQuery 的東西，或者是我還不了解的函式。
uj5u.com熱心網友回復：
這似乎只有在您單擊<label>標簽時才會發生。當您單擊<div>，<span>或<input>它作業正常。
這種行為可以在這里解釋：為什么 onclick 元素會為 label element 觸發兩次。
一種解決方法是添加return false;到您的點擊處理程式：
$("#my-id").unbind('click').click(function(){
if($(this).find('input').is(':checked')){
console.log('checked');
}
else {
console.log('not checked');
}
return false; // Prevents event handler from being called twice
});
您還可以呼叫.preventDefault()事件物件以防止它被呼叫兩次：
$("#my-id").unbind('click').click(function(e){
if($(this).find('input').is(':checked')){
console.log('checked');
}
else {
console.log('not checked');
}
e.preventDefault();
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/338603.html
上一篇：jquery.validate.unobtrusive.js不顯示訊息
下一篇：jQuery無法選擇元素