jquery对象给动态生成的元素添加事件失效【项目日常】

       写项目时候发现：使用jquery对象添加事件时如果元素对象是动态生成的，运行代码后发现事件就会失效；即 jquery对象添加事件时 只能给固有元素添加事件；

固有元素：	当调用事件函数给元素添加事件时，如果元素已经生成，则这些元素叫做固有元素；
动态生成的元素：	当调用事件函数给元素添加事件时，如果元素还没有生成，后来生成的元素叫做动态生成的元素。

 选择器.事件名(function(){ });

jQuery("#myName").click(function(){})

原因：动态生成的元素 一般是ajax异步请求会的响应后根据数据动态渲染生成的，然而ajax技术是异步执行的，ajax请求发送时，ajax请求获得响应需要时间，此时我们的 jquery对象添加事件的代码不会等待ajax请求响应返回，而是继续执行，但是此时因为ajax还未获得请求响应，动态元素还未生成；所以jquery对象事件添加固然会失败。
解决方案：

• 把 ajax 请求设置未同步请求，这样 jquery对象添加事件 的代码会在 ajax请求获得响应生成动态元素后才会按顺序执行，此时元素已存在，事件就可以添加成功；但是不推荐，这样效率不高；
• 使用jquery的on函数：父选择器.on("事件类型",子选择器,function(){});
  父元素:必须是固有元素,可以直接父元素,也可以是间接父元素.
              原则固有父元素范围越小越好.
              事件类型：跟事件属性和事件函数一一对应。
              子选择器：目标元素,跟父选择器构成一个父子选择器
              不但能给固有元素添加事件，还能够给动态生成的元素添加事件。

以下是我在项目 使用jquery的on函数 修改后 和 未修改前 的代码对比案例：

//给"选则"按钮添加单击事件------------未生效事件
jQuery("#tBody input[type='checkbox']").click(function () {
       // 如果所有选择按钮都被选中(选中的按钮数和总按钮数相同)，则全选按钮被选中
        if(jQuery("#tBody input[type='checkbox']:checked").length === jQuery("#tBody input[type='checkbox']").length) {
            jQuery("#chckAll").prop("checked", true);
        }else {
             jQuery("#chckAll").prop("checked", false);
        }
});


//给"选则"按钮添加单击事件------------修改后事件生效
jQuery("#tBody").on("click","input[type='checkbox']",function () {
        // 如果所有选择按钮都被选中(选中的按钮数和总按钮数相同)，则全选按钮被选中
        if (jQuery("#tBody input[type='checkbox']:checked").length === jQuery("#tBody input[type='checkbox']").length) {
             jQuery("#chckAll").prop("checked", true);
        }else {
             jQuery("#chckAll").prop("checked", false);
        }
});