2012-01-03 67 views
2
$('#container').on('click', 'a',function().. 

jQuery選擇使用上

$('#container a').on('click',function().. 

是什麼選擇兩者之間的區別。

+0

http://24ways.org/2011/your-jquery-now-with-less-suck查看事件代表部分 – jondavidjohn 2012-01-03 20:48:21

回答

3

第一個將綁定到所有當前和將來的錨標記,而第二個將僅綁定到現有的錨標記。

第一個與使用.delegate()幾乎相同,唯一不同的是事件和選擇器被交換。

編輯:回答進行評論,因爲它是相當長的

第一個是包含大量的錨標籤的動態內容或內容有用。第一個僅綁定一個偵聽事件的單個事件,以便在匹配給定選擇器的元素上觸發事件。第一個可以重寫爲$("#container").delegate("a","click",function()...以獲得完全相同的功能。在大多數情況下,它比直接綁定元素更有效。但是,如果您的內容不是動態的,並且不包含非常多的錨標記,則應該使用第二段代碼,因爲它比第一段代碼複雜。

+0

謝謝。我仍然有點困惑。每個有用的都是現實生活中的例子。 – Pinkie 2012-01-03 20:52:31

+0

已添加答案評論我的回答 – 2012-01-03 20:56:53

+0

感謝您的澄清。我正在處理動態內容。所以第一個選擇器似乎是答案。第一個選擇符不同於$('#container')。find('a')。on('click',function()'.. – Pinkie 2012-01-03 21:02:54

3
  1. 代碼片段:

    設置點擊事件正在或將在#container

  2. 代碼段的所有錨標籤2:

    設置點擊事件給所有錨標籤#container

1

The前者將點擊處理程序附加到#container元素,該元素在點擊碰巧集中在a元素上時分配事件。如果a元素可能會在事件處理程序的賦值/綁定之後被更新,刪除或動態添加,那麼這非常有用。

後者將點擊處理程序直接附加到#container元素中包含的a元素。這意味着在事件處理程序和函數綁定到DOM中的節點時,那些元素必須在中存在。

0

檢查jQuery docs

selector 
A selector string to filter the descendants of the selected elements that 
trigger the event. If the selector is null or omitted, the event is always 
triggered when it reaches the selected element. 
0

我想的「a」是一個選擇器字符串來過濾觸發事件的選定元素的後代。如果選擇器爲空或省略,則該事件在到達選定元素時始終觸發。