jQuery中關於​​用on代替delegate以及live的寫法區別詳解

早期對頁面上後期載入的動態元素,賦事件或值的時候,是使用live的.  由於效率比較低(其實資料不多也感覺不出來),後面使用delegate委託來代替了,再後面,1.7以後使用on 來代替delegate了. live,delegate在新版本中都還可以用. 它們在寫法上有差別,一段時間不寫容易混,寫下來備忘. 如點選p裡的任一button時增加一個新button：

#頁：

<div id="panel">   
      <input type="button" name="name"  value="clone"class="btnAdd" />
</div>

腳本:

1.1 使用live

jQuery版本1.3+

$('.btnAdd').live('click', function () {
    $(this).clone().appendTo('#panel');
});

1.2 直接把live改成on, 沒有給範圍比如#panel,這對頁面上一開始有的按鈕有效. 也就是說無法直接這樣代替live

$('.btnAdd').on('click', function () {    
$(this).clone().appendTo('#panel');
});

2.使用delegate 需要給它一個範圍才行，如#panel,讓它到裡面找。這樣可以實作live一樣的效果.

jQuery版本1.4.3+

#

$('#panel').delegate('.btnAdd', 'click', function () {
    $(this).clone().appendTo('#panel');
});

##

3.使用on 给它一个范围才行，如#panel,让它到里面找. 这样可以实现live和delegate一样的效果.

里面的'click', '.btnAdd'跟上面的delegate是相反的.只要记住on click是挨在一起的就行了.

jQuery版本1.7+

$('#panel').on('click', '.btnAdd', function () {
    $(this).clone().appendTo('#panel');
});

以上是jQuery中關於​​用on代替delegate以及live的寫法區別詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！