JQuery中on方法使用记录

需求

HTML代码如下，其中的span标签会动态添加，在其上需要监听【 点击事件 】

<div id="parent">
   <span>11111</span>
</div>

一般都是考虑使用 on 来绑定监听事件到 span 上，如：

$('div#parent span').on('click', function(){...});

问题：

以上代码是直接把事件绑定到了 span上，后面动态添加的 span是不会绑定上事件的

解决:

$('div#parent').on('click','span', function (){...});

解析：

on方法可以接受三个参数：事件名、触发选择器、事件函数

特别注意的是：on方法第二个参数触发选择器就是你将要添加的HTML元素的类名、id或者元素名，使用它就可以实现live的效果

这个触发选择器实际上就是在 JQ内部判断了一次事件参数的$(e.target).is(selector)，只有触发对象匹配触发选择器才会触发。这是利用了事件冒泡的机制来完成 的