2012-04-15 66 views
0

我在使用上(麻煩)的元素,因爲現場()已過時。使用上()將事件處理程序附加到將動態創建

這似乎並不工作:

$('body').on("click", ".myButton", console.log("clicked")); 

當我刷新頁面,控制檯會立即說:「點擊」即使我沒有任何點擊,但是當我真正點擊不火它。

而且,它似乎更高性能的將其應用到DIV按鈕在,而不是身體的巨大範圍。這是真的?

+1

,因爲你正在執行'的console.log它不工作(「點擊」)'馬上。 ''.live()'會導致同樣的問題。通過函數引用,你會沒事的。是的,你應該總是將事件處理程序儘可能地接近實際元素。這不是關於範圍,而是關於後代鏈的長度,可以這麼說。 – 2012-04-15 17:47:25

+0

[爲什麼點擊事件處理程序會在頁面加載時立即觸發?](http://stackoverflow.com/questions/7102413/why-does-click-event-handler-fire-immediately-upon-page-load) – 2012-04-15 17:50:03

+0

@FelixKling,這個問題是關於什麼時候開火,我的是關於什麼地方以及爲什麼。 console.log()需要位於一個函數中,而不僅僅是它本身。 – SpaceNinja 2012-04-15 17:56:56

回答

2
$('body').on("click", ".myButton", function() { 
    console.log("clicked") 
}); 
+0

非常感謝!只需將它包裝在一個函數中,以便它不會立即調用。 – SpaceNinja 2012-04-15 18:00:31

2

你看到的奇怪的行爲是因爲你實際上是在該行調用console.log自己。你應該把它包裝在一個函數中。

function() { console.log('clicked'); } 
+0

從jQuery 1.7開始,.delegate()已被.on()方法取代。 – 2012-04-15 17:46:41

+0

那怎麼樣... – nickf 2012-04-15 17:46:56

+0

啊,我現在對()的理解好多了。比你,NickF! – SpaceNinja 2012-04-15 17:59:16

3
$(function(){ 
    $('body').on("click", ".myButton",function(){ 
     alert("clicked"); 
    }); 
}); 
2

你的問題的第一部分已經通過其他的答案得到充分的回答。您正在調用您的console.log()函數,而不是將參考傳遞給稍後可以調用的函數。

要回答你的問題的第二部分,它沒有其他人還沒有解決:

是的,它會以按鈕的接近祖先進行更好的範圍事件處理程序,而不是使用$('body')

你應該選擇你的按鈕的祖先,那就是儘量靠近按鈕的可能,但目前靜態當時您安裝的事件處理程序(而不是動態銷燬/後創建)。

.live()是贊成不贊成.on()一個主要的原因是,.live()把所有它的事件處理程序document對象上,並在繁忙的頁面,也可以委託事件處理程序的document對象很多。當發生這種情況時,單個事件一直到達document對象,然後必須將每個事件與可能的委託事件處理程序的長列表進行比較。由於這通常意味着運行選擇器操作而不是eventTarget,所以這確實會變慢。

另一方面,如果您選擇了一個更接近所需eventTarget的祖先對象,那麼通過此特定委派事件處理程序和整個事件的更小的對象列表中的更小的事件列表系統可以表現更好。

對於很多事件/對象,委託的事件處理程序最佳性能應該儘可能靠近目標對象儘可能地被應用。