1. 程式人生 > >Jquery給動態新增的元素繫結事件:live() delegate() on()

Jquery給動態新增的元素繫結事件:live() delegate() on()

給已存在的元素繫結事件時可以直接寫:

$(".class a").click(function(){   })

但是對於動態生成並append()到頁面上的元素來說,就不能直接用上面的方法來繫結事件了。

在Jquery 1.7之前我們可以通過live()和delegate()來解決:

1.live()方法

   語法:$(selector).live(event,data,function)

$(".class a").live("click",function(){   })

   但是在Jquery1.7版本中就不推薦使用live()方法了,在1.9版本中live()方法被移除了,用on()方法來代替。

   官方原文件說法如下:The live() method was deprecated in jQuery version 1.7, and removed in version 1.9. Use the on() method instead.

2.delegate()方法

   語法:$(selector).delegate(childSelector,event,data,function)

$(".class").delegate("a","click",function(){  })

   delegate()方法在jQuery 3.0版本中就不推薦用了,只是還沒有被刪除而已,推薦用on()方法來代替。

   官方原文件說法如下:The delegate() method was deprecated in version 3.0. Use the on() method instead.

現在推薦的方法是on():

3.on()方法

   語法:$(selector).on(event,childSelector,data,function,map)

$(".class").on("click","a",function(){ })

   繼jQuery1.7之後,on()方法替代了bind(), live() 和 delegate() 方法。on()方法可以給當前元素和未來元素繫結事件。

   childSelector項是可選的,如果沒有childSelector項的話,只能給被選元素(已存在的元素)繫結事件,不能給未來元素(後續動態生成的元素)繫結事件;

   用off()方法解除事件的繫結,如果繫結的事件只執行一次,則用one()方法。

現在知道了怎麼給未來元素繫結事件,那麼原理是什麼呢?

給未來元素繫結事件的原理其實是事件委託,把事件繫結在未來元素的父元素上,然後通過父元素找到子元素觸發該事件。