jquery事件，簡單的點擊，如何以及爲什麼？

Question

所以我有一個頁面（表）基於其他地方的一些選項的一些數據可能會從服務器重新加載ajax。 該表格中有可點擊的按鈕，以使其他事情發生在表格中的記錄中。

我注意到這個...... http://api.jquery.com/on/ ...是用於連接簡單的事件處理程序的元素推薦的方法，但只重視存在的元素，現在，當我做我的AJAX負載我失去了連接處理程序。

所以我開始使用這個... http://api.jquery.com/live/ ...並猜測是什麼，jquery團隊做了他們慣常的做法，並且不贊成它說我應該使用「on」。

這些功能表現非常不同但jQuery的文檔說我應該互換使用他們，所以...

有人能解釋「對」的這個equivelent，我怎麼能得到它的一個ajax後元素工作調用替換的是海以前一直連接到元素...

$("some selector").live('click', function (e) { 
      // some code code 
      e.preventDefault(); 
      return false; 
     }); 

我的理解是，你會做這樣的事情......

$("some selector").on('click', function (e) { 
      // some code code 
      e.preventDefault(); 
      return false; 
     }); 

我的猜測是，我必須在執行我的ajax調用後重新運行此代碼，方法是將此代碼放入某種「initClicks」函數中，並在頁面加載和ajax調用後調用它。

這似乎是對我的後退一步...或者我錯過了什麼嗎？

Answer 1

當您使用.on('click', function (e) {})功能，它僅適用於現有元素。 爲了處理單擊所有selector元素的事件，即使這將在未來添加的元素，你可以使用這些功能之一：

$(document).on('click', "some selector", function (e) { 
    // some code code 
    e.preventDefault(); 
    return false; 
}); 

或：

$("body").delegate("a", "click", function() { 
    // your code goes here 
}); 

欲瞭解更多信息，請閱讀有關文章Understanding Event Delegation

Answer 2

的等效說live是

$(document).on('click', "some selector", function (e) { 
    // some code code 
    e.preventDefault(); 
    return false; 
}); 

的​​是所有事件處理程序的格式單止損，你所用的模型是一樣的

$("some selector").click(function (e) { 
    // some code code 
    e.preventDefault(); 
    return false; 
}); 

這確實基於工作事件代表團。

Answer 3

由於要素動態添加，你需要使用event delegation註冊事件處理程序

// New way (jQuery 1.7+) - .on(events, selector, handler) 
$(document).on('click', 'some selector', function(event) { 
    // some code code 
    e.preventDefault(); 
    return false; 
}); 

而且，無論是使用e.preventDefault()或return false，如：

return false = e.preventDefault() + e.stopPropagation() 

那麼，有沒有需要同時使用它們兩個。

Answer 4

您絕對不能將事件監聽器附加到DOM中不存在的元素。什麼live和on方法做的是在現在存在的父母上附加偵聽器。 live只不過是附在document本身上的on。

Answer 5

live()並不神奇，它看不到未來的元素，它是什麼做的是一個監聽器附加到您的document頁面，檢查每一個冒泡事件的第一根元素，如果你的目標選擇匹配，當它找到一個匹配，它執行你的功能。

這就是所謂的event delegation

live()已棄用了很好的理由，主要是由使用它的性能損失。

然後jQUery團隊推出了delegate()函數，該函數爲我們提供了一種實現準確結果的新方法，但它通過將偵聽冒泡事件的範圍限制爲可能最近的父親來巧妙地解決了性能問題你現在的未來要素。

當他們推出了On()功能，它們給你使用它作爲正常的事件處理程序，或作爲未來元素委派處理的能力。

所以我相信他們做了這個一個好工作，給我們，因爲我們要根據具體情況想使用它的靈活性。

代碼示例：

使用delegate()：

$("#TAGERT_ID").delegate("a", "click", function() { // your code goes here} 

使用on()（對於委託事件）

$("#TAGERT_ID").on("click", "a", function() { // your code goes here} 

兩種方式都是一樣的，並且將處理上a未來點擊這將在您的以後添加元素。

TARGET_ID是使用ID爲您選擇一個例子，但您可以根據您的具體需要使用任何選擇。