需要幫助理解jquery委託（）函數

Question

我很難理解jquery的.delegate函數的語法。比方說，我有以下幾點：

$(".some_element_class").delegate("a", "click", function(){ 

    alert($(this).html()); 

}); 

我知道a因素是應用了click事件的元素。我知道，一旦我們點擊了a元素，事件click將被觸發並且回調函數將被調用。但.delegate之前的目的是什麼？在這種情況下，.some_element_class的目的是什麼？我如何閱讀以上內容，包括.some_element_class？另外，在上面的示例中，$(this)代表什麼？它代表a元素還是代表.some_element_class？

請有人，對此有所瞭解。

謝謝

Answer 1

這意味着delegate()是在.some_event_class調用。而a是選擇器字符串，click是事件類型字符串& function()是eventhandler函數。 delegate()方法用於處理「直播事件」，對於靜態事件bind()被使用。我希望這有幫助。隨便問，如果您有任何疑問bind()摘要之間& delegate()

//Static event handlers for static links 
$("a").bind("",linkHandler); 

//Live event handlers for dynamic parts of the document 
$(".dynamic").delegate("a", "mouseover", linkHandler); 

差異：他們只是結合事件處理特定的文檔元素的方法。

Answer 2

這減少了事件綁定。

這基本上只在a tags上設置一個事件，只在類.some_element_class的元素中，而不直接將事件綁定到a tags。

http://api.jquery.com/delegate/

http://api.jquery.com/on/

在jQuery 1.7，.delegate（）已經被。對（）方法取代。 但是，對於較早的版本，它仍然是 使用事件委派的最有效方法。有關事件綁定和委託 的更多信息位於.on（）方法中。在一般情況下，這些都是這兩種方法相當於模板 ：「...什麼的.delegate之前會發生什麼目的」

$(elements).delegate(selector, events, data, handler); // jQuery 1.4.3+ 
$(elements).on(events, selector, data, handler);  // jQuery 1.7+ 

$(".some_element_class").on("a", "click", function(){ 

    alert($(this).html()); 

}); 

Answer 3

• 委託勢必.some_element_class元件。

• 即委託觸發每點擊這需要內部.some_element_class

• 該委託測試被點擊了什麼地方，所以你處理功能只有運行，如果...

  • 點擊的實際元素匹配"a"選擇器，或
  • 任何一個被點擊的實際元素的元素.some_element_class的後裔與"a"選擇器相匹配。

---

<div class="some_element_class"> <!-- delegate handler is here --> 

    <div>won't trigger your handler</div> 
    <a>will trigger your handler</a> 
    <a><span>will trigger</span> your handler</a> 

</div> 

所以你可以看到，只有一個處理程序綁定到容器。它分析容器內的所有點擊，並且如果單擊的元素（或其嵌套的祖先之一）匹配選擇器參數，您的函數將運行。

---

因爲這裏只有一個封閉的處理程序，它會爲添加到容器未來元素工作...

<div class="some_element_class"> <!-- delegate handler is here --> 

    <div>won't trigger your handler</div> 
    <a>will trigger your handler</a> 
    <a><span>will trigger</span> your handler</a> 

     <!-- this element newly added... --> 
    <a><span>...will also trigger</span> your handler</a> 

</div> 

---

「此外，在上面的例子中，有哪些呢$(this)代表？「

this將表示匹配"a"選擇的元素。

Answer 4

的a實際上只是一個過濾選擇，會發生什麼是正常的單擊事件勢必.some_element_class，並隨時都會激發該事件，該事件的目標是經過長達.some_element_class以查看是否有匹配的元素過濾選擇器（標記名稱a）。如果是這樣，您的回調將被觸發，this設置爲匹配冒泡路徑中的a選擇器的第一個元素。對於推薦 「的」

$(".some_element_class").bind("click", function (e) { 
    var matches = $(e.target).closest("a", this); 
    if (matches.length) { 
     yourcallback.call(matches[0], e); 
    } 
});