早期對頁面上後期加載的動態元素,賦事件或值的時候,是使用live的. 由於效率比較低(其實數據不多也感覺不出來),後面使用delegate委託來代替了,再後面,1.7以後使用on 來代替delegate了. live,delegate在新版本中都還可以用. 它們在寫法上有差別,一段時間不寫容易混,寫下來備忘. 如點擊div裏的任意一個button時增加一個新button：
頁面：
|
1
2
3
|
<div id="panel"> <input type="button" name="name" value="clone"class="btnAdd" /></div> |
腳本:
1.1 使用live
jQuery版本1.3+
|
1
2
3
|
$('.btnAdd').live('click', function ()
{ $(this).clone().appendTo('#panel');}); |
1.2 直接把live改成on, 沒有給範圍比如#panel,這對頁面上一開始有的按鈕有效. 也就是說無法直接這樣代替live
|
1
2
3
|
$('.btnAdd').on('click', function ()
{ $(this).clone().appendTo('#panel');}); |
2.使用delegate 需要給它一個範圍才行，如#panel,讓它到裏面找.這樣可以實現live一樣的效果.
jQuery版本1.4.3+
|
1
2
3
|
$('#panel').delegate('.btnAdd', 'click', function ()
{ $(this).clone().appendTo('#panel');}); |
3.使用on 給它一個範圍才行，如#panel,讓它到裏面找. 這樣可以實現live和delegate一樣的效果.
裏面的'click', '.btnAdd'跟上面的delegate是相反的.只要記住on click是挨在一起的就行了.
jQuery版本1.7+
|
1
2
3
|
$('#panel').on('click', '.btnAdd', function ()
{ $(this).clone().appendTo('#panel');}); |