在使用jquery的過程中,我們可能會遇到一個奇怪的現象,那就是點擊一次按鈕會觸發兩次click事件。這種現象很讓人頭疼,下面我們來看一下可能出現這種問題的原因和解決方式。
$(document).ready(function() {
$('button').click(function() {
console.log('clicked');
});
});
以上是一個簡單的click事件綁定示例,如果這個示例的按鈕點擊后會連續輸出兩個"clicked",那么很可能是綁定事件出現了重復。可能有以下兩種情況:
1. 綁定了多個事件
$(document).ready(function() {
$('button').click(function() {
console.log('clicked');
});
$('button').click(function() {
console.log('clicked too!');
});
});
以上代碼綁定了兩個click事件,當點擊按鈕時,控制臺會輸出兩個"clicked"和"clicked too!"。解決方式是只綁定一個事件即可:
$(document).ready(function() {
$('button').click(function() {
console.log('clicked');
console.log('clicked too!');
});
});
2. 綁定了多個相同事件
$(document).ready(function() {
$('button').click(function() {
console.log('clicked');
});
$('button').on('click', function() {
console.log('clicked again!');
});
});
以上代碼綁定了兩個相同的click事件,當點擊按鈕時,會輸出兩個"clicked"和"clicked again!",導致了重復觸發問題。解決方式是只使用一個綁定方法即可:
$(document).ready(function() {
$('button').click(function() {
console.log('clicked');
}).on('click', function() {
console.log('clicked again!');
});
});
綜上所述,引起jQuery click觸發兩次的原因是綁定了多個事件或綁定了多個相同事件,解決方式是只綁定一個事件或只使用一個綁定方法。