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()方法。

   

现在知道了怎么给未来元素绑定事件，那么原理是什么呢？

给未来元素绑定事件的原理其实是事件委托，把事件绑定在未来元素的父元素上，然后通过父元素找到子元素触发该事件。