【jquery】 在异步加载的元素上绑定事件

最近因为工作关系又重新回归到了jquery的怀抱，发现很多jquery的一些细节处理的部分都忘记了。这里记录一下最近在做项目时频繁遇到的一个问题：给异步加载的元素添加事件绑定。

问题发生的前提是项目前端开发使用了jquery 和 artTemplate技术，其中经常要通过artTemplate的template.compile()方法来实现像是向下滚动鼠标动态加载后续分页的内容并显示在页面上这样的效果。

在jquery官网上关于事件绑定和事件委托的4个方法中有这样的介绍：

live()：jQuery1.7之后弃用
bind(): 动态添加的元素无法使用该方法绑定事件
delegate():jQuery1.7之后被on()取代
on()： jQuery1.7之后引入，支持事件绑定的全部功能

从这里可以看出我们正常情况下使用的就是bind()或者on()了，而bind()无法实现在动态添加的元素上绑定事件，那么我们平时使用频率很高的$('xx').click(function(){...})也是不适用的。所以要实现在异步加载的元素上添加事件绑定需要使用on()方法。

一般来说可以直接绑定在document对象上，如$(document).on('click','xx',function(){...})这样的语法。$(...)中的元素需要是真正绑定的元素'xx'的父级或者body上。当事件直接发生在绑定的元素上时，该程序不会被调用。

另外，我在另一个项目也是用了像这样的直接把事件委托在document对象上来实现事件绑定，但是没有效果，然后我换了一个更近一点的父元素就好了。。。如果你也遇到这样的问题可以试试改成绑定在比较接近的父元素上。

以上纯属个人意见，希望大家发现有问题的可以给我指点，也欢迎大家来互相交流。