jQuery动态绑定事件（on指令）

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();
  }
});

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