写项目时候发现:使用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);
}
});