jQuery中的on方法

在jQuery的1.7+的版本之中，原来的live方法被去除了，那么怎么做到live方法的一样的绑定时间的效果呢？答案就是on方法，on 方法有怎么去使用呢？

1. on 给已经在dom 中的元素绑定事件

jQuery的文档里面已经给出示例了,先看看on方法的完整的形态：

on(events,[selector],[data],fn)
参数：events,[selector],[data],fn)*
events:一个或多个用空格分隔的事件类型和可选的命名空间，如”click”或”keydown.myPlugin” 。
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它> 到达选定的元素，事件总是触发。
data:当一个事件被触发时要传递event.data给事件处理函数。
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

在jQuery的文档中的示例：

function myHandler(event) {
    alert(event.data.foo);
}
$("p").on("click", {foo: "bar"}, myHandler)

这个示例基本可以说明on方法的使用，但是示例并没有涉及到第二个参数selector,而第二个有一个非常好用的特点就是这里第二点 给动态添加的元素绑定事件

2. on 给动态添加的元素绑定事件

其实，on方法里面，第二个参数selector 才是真实作为触发事件的对象，在参数的解释中就有说明。
而jQuery在绑定事件的时候，$(selector1).on() 的时候，如果selector1 的元素还没有加载到dom中的时候，这段代码就会被忽略不执行，事件就不会绑定。这也就是说，如果我们省略on参数的selector的时候，时间是绑定要selector1上面。如果selector1的元素不存在，绑定事件就失败了。

也正是这样一个selector 参数，可是帮助我们实现为动态加载元素绑定事件。如上，我们知道真正触发事件的selector,事件绑定代码需要selector1存在，那就好办。我们找一个dom 中已经存在的元素，例如：document,我们要绑定的元素必然是这个的子元素，假如我们给 .testBtn （js动态加入的元素）绑定click事件，带入如下：

    $(document).on('click','.testBtn',function(){
        console.log('button clicked ...');
    })

这样就可以实现了。

3. 值得注意的地方

这里之前关于on还有一篇文章 http://blog.youkuaiyun.com/fun913510024/article/details/46971681
这篇文章中提到了如果多次对一个元素绑定事件，事件会触发多次，需要off 解除。（另外，那篇文章举例不太好，要实现目的，应该采用这里说的方法，就不会多次绑定了）。
对那篇文章里面的例子进行测试之后发现，最后添加的按钮只执行了一次，前面添加的按钮事件执行次数一次增多，大致可以发现，on 是把这些时间放在回调队列里面的，不管事件回调的函数时候相同都会依次执行。