jQuery用on指令统一事件注册方式

注：jQuery1.7 之后支持

on可以注册简单的事件

//以点击事件为例$(\'选择器\').on(\'click\',function(){});

也可以注册事件委托，且支持动态绑定

$(\'选择器\').on(\'click\',\'xxx\',function(){});//\'xxx\'可以是标签，例如 <p>,<span>,<div>//也可以是 类名 或 id

举一个例子，方便更好的理解 动态绑定

这是一个记事本，里面有一些计划，很显然，该界面 tbody 部分由三个 tr 构成,每个 tr 中都有一个事件，以下为源码：

<!--html部分--><table style=\"width: 100%;\"><thead><tr><th style=\"width: 35%;\">事件</th><th style=\"width: 25%;\">时间</th><th>完成了嘛？</th></tr></thead><tbody id=\"shijian\"><tr class=\"list\"><td>吃饭饭</td><td>8:00</td><td><span>已完成</span>&nbsp;&nbsp;<i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i></td></tr><tr class=\"list\"><td>睡觉觉</td><td>21:00</td><td><span class=\"delete\">已完成</span>&nbsp;&nbsp;<i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i></td></tr><tr class=\"list\"><td>撸代码</td><td>2:00</td><td><span class=\"delete\">已完成</span>&nbsp;&nbsp;<i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i></td></tr></tbody></table>

// js部分//on统一事件注册方式$(\".fa-trash-o\").click(function () {var deleteConfirm = confirm(\"确认删除嘛? \");if (deleteConfirm) {$(this).parent().parent().remove();}});

可以看到，垃圾桶图标代表了删除事件，这部分代码已经在js文件中写好了,当js部分的代码运行完成后，删除事件已经注册完成，故事件生效。

可是，当我们新添加一个事件进入表格后，由于之前进行的是简单注册，故新添加事件中的垃圾桶图标就不会有点击事件，也就意味着无法删除新添加事件

解决此问题有两种方法：

法一: 追加注册事件

//法一: 追加注册事件$add.find(\".fa-trash-o\").click(function () {var deleteConfirm = confirm(\"确认删除嘛? \");if (deleteConfirm) {$(this).parent().parent().remove();}});

用find方法找到垃圾桶图标所在类，为其追加点击事件

法二: on统一事件注册方式（推荐）

//on统一事件注册方式$(\"#shijian\").on(\"click\", \".fa-trash-o\", function () {var deleteConfirm = confirm(\"确认删除嘛? \");if (deleteConfirm) {$(this).parent().parent().remove();}});

在注册事件时，通过其父类找到事件所在类进行注册，这种方法支持了动态绑定事件