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

 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, 而第二个有一个非常好用的特点就是这里第二点 给动态添加的元素绑定事件。

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 ...');
})

这样就可以实现了。