2010-12-21 27 views
3

在我的重ajax代碼中,我總是綁定「點擊」身體標記&根據$(e.target) &使用$.fn.hasClass()。但是,當我點擊一個內部有</span>標籤的錨時,我的$(e.target)等於此節點,而不是我希望的父錨。jQuery e.target冒泡最佳實踐?

從現在開始,我用這一招(var $t = $(e.target);):

/** bubbling **/ 
if($t.get(0).tagName !== "A" && $t.get(0).tagName !== "AREA") { 
    $t = $t.parent("a"); 
    if(empty($t)) return true; 
    //else console.log("$t.bubble()", $t); 
} 

感覺不對莫名其妙......你有什麼更好的實現?


$.fn.live()沒有解決我的問題,因爲它仍返回跨度爲目標。而且我在找的速度(基於原子觸摸設備上運行)&現場似乎是方法要慢(兩次):http://jsperf.com/bind-vs-click/3


事實上,作爲@Guffa指出,使用$.fn.live()解決了跨度起泡問題因爲我不再需要event.target。我猜這裏沒有其他「正確的」答案(在容器上使用綁定)。

回答

2

爲什麼不使用live這種方法呢?

$('a.someclass').live('click', function(){ 
    // do something 
}); 

live方法結合到主體元件和檢查事件目標針對選擇器。

jQuery: live

最接近
+0

我需要最低的開銷(在基於原子的觸摸設備上運行)並且實際顯示速度較慢(兩次):http://jsperf.com/bind-vs-click/3 – Olivier 2010-12-21 16:47:12

2

closest是有用這裏(雖然其它方法  — livedelegate   —描述如下):

$t = $t.closest('a'); 

$t開始,通過父元素的鏈的工作原理向上直到它找到一個匹配在這種情況下給出選擇器  —「a」。

這裏有一個基本的例子:

HTML:使用

<a href='#'><span>Outer span <span>inner span <em>em</em></span></span></a> 

JavaScript的jQuery的:

jQuery(function($) { 

    $(document).click(function(e) { 
    var $t = $(e.target).closest('a'); 
    $t.css("border", "1px solid black"); 
    return false; 
    }); 

});​ 

Live copy

點擊鏈接把一個邊界周圍的鏈接,無論你單擊其中一個跨度或em元素或任何地方。

有些偏離主題,但jQuery的最新版本通過live(它基本上做你所做的事情,在主體上掛鉤一個事件,然後查看它發生的實際元素,並將選擇器應用於元素匹配)和delegate(與live相同,但植根於特定元素而不是文檔本身)。

+0

可能是有用的,但這裏遠離話題(不需要它其實),住的是另一種慢的辦法和我所有關於速度。 – Olivier 2010-12-21 16:49:30

0

我認爲你這樣做是因爲bind對AJAX調用後插入的內容不起作用。我建議你使用live來附加你的事件並允許jQuery來處理這個事件。