爲什麼在多次啓動$ .click（）時，如果鏈接被單擊一次，它會多次捕獲它？

我有類似：

function init(){ 
    $('.btn').click(function(){ 
    //do something; 
    } 
}

而且當有新的內容通過AJAX加入，我打電話init()，讓點擊事件應用於新的按鈕。但是當我點擊一次時，它會捕獲多次點擊（與我稱爲init()的次數一樣多）。它是有道理的，但如何避免它？

的jsfiddle鏈接：http://jsfiddle.net/s2ZAz/8/

解決方案：
*使用$ .delegate（） - http://api.jquery.com/delegate/
*使用$ .live（） - http://api.jquery.com/live/

不太優選，不過，解決方案：
*使用$ .off（） - http://api.jquery.com/off/或$ .unbind（） - http://api.jquery.com/unbind/

來源

2011-12-04 Sherzod

click說，「對於匹配選擇器的每個對象，連接這個點擊監聽器」。你可能想要一些更像delegate的東西，它說「對於任何匹配這個選擇器的每個對象，連接這個監聽器」。

$(document).delegate('button', 'click', function() { 
});

你仍然會得到雙倍的回調，如果你打電話init的兩倍，但以這種方式，你會不會有向打電話init兩次，因爲新的對象添加，它們就已經被分配到點擊偵聽器。

請注意，上面的document應該用最接近的永久祖先來代替，如下面Greg的評論所述。

Demo。

由於jQuery 1.7，你最好使用the .on() function來達到同樣的效果。

Demo。

來源

2011-12-04 19:10:08

Upvoted，但它可能是值得一提的代表通常是優選的假設一些含元素已知始終存在。實時方法，它只是在文檔上調用委託，可能相當矯枉過正。 –

@kennis：你是對的，編輯過。 –

這並不能改善.live（），因爲你仍然在委託給文檔。您應該委託給最近的包含所有可點擊節點的祖先，並且不會被銷燬。 –

可以使用unbind方法（如果您使用的是新的jQuery 1.7語法用於連接處理器或off法），除去事件處理程序

更重要的是，你可以使用live方法，來建立事件處理程序，用於將來添加到頁面並匹配給定選擇器的任何元素。這樣你只需要調用init一次。

來源

2011-12-04 19:09:25

$("body").delegate("button", "click", function() { 
    alert('I\'m annoying!'); 
}); 

$('div').append("<button>Click me, I will alert twice</button><br/>"); 

$('div').append("<button>Click me, I will alert once</button><br/>"); 

$('div').append("<button>Click me, I will not alert at all</button><br/>");

Try it out

來源

2011-12-04 19:10:15

因此它與.live（'click'）相同？從來不知道委託（）;很酷，謝謝！ – Sherzod

@shershams是的，但它不會在1.7中被棄用，它支持除整個文檔以外的根元素。 –

@GregPettit爲什麼我會複製粘貼它，如果問題是作爲jsfiddle提供的？我做一個簡單的改變並保存。這比解釋要做什麼要簡單得多，因爲任何聰明人都可以通過谷歌改變功能並查看自己的API文檔。 –

正如大衛所說，並按照liho的代表例子（愛搗鼓級聯警報會多少次彈出!!方式），問題是有多個綁定，從而可以用.live()（不贊成）或.delegate()（被淘汰）或.on()（首選）來解決。但是，在性能方面委派聆聽文檔甚至是節點是錯誤的。

更好的方法是確定一個永遠不會被銷燬的按鈕的祖先。 body是一個簡單的選擇，但幾乎總是這樣，我們使用某種類型的包裝元素構建頁面，這些元素嵌套在比body更深的一個或多個層次上，因此可以設置更少的偵聽器。

HTML：使用jQuery 1.7+

<div id="someWrapper"> 
    <div class="somethingThatGetsDestroyed"> 
    <button>Click Me</button> 
    </div> 
</div>

JS：

$('#someWrapper').on('click', 'button', function() { 
    alert('Clickity-click!'); 
});

來源

2011-12-04 19:26:28

爲什麼在多次啓動$ .click（）時，如果鏈接被單擊一次，它會多次捕獲它？

回答

相關問題