关于jQuery绑定事件会叠加的解决和心得总结
2016-04-02 17:08
495 查看
作为一名成长中程序员,出现问题,分析问题,解决问题才是真正需要做到的。
true,而后加载的部分只打印一次false或是true。
起初我认为我肯定是jquery功能代码不对,于是自己检查了html里id,class,发现并没有出错,于是我便一直在想为何控制台会意外打印两次,后面室友提示我说,试试在执行功能之前清除事件绑定,于是我便照做了用jquery 的
true , 而后加载的数据行选正常,打印一次。
虽然问题很小,但是也是学习,总之自己还是需要不断努力,完善自己。博文只是对自己的总结
原文地址:http://blog.csdn.net/Willerfu/article/details/50993186
关于jQuery的学习中我忽略了一个取消绑定事件.unbind()的使用,也不知道绑定事件会累加的情况,结果因为这个原因,让我在项目上栽了坑。只能说自己还太年轻,需要学习掌握的知识还有很多。
我遇到的问题
我在项目中遇到的状况,一个评价页面,简单的来说就是左右两个表格,ajax分别动态加载学生姓名学号信息和不同科目对学生评价内容两部分,两边表格我都每行写了checkbox并对
table tbody tr绑定click事件执行行选功能,起初我写的是静态页面html,行选功能完全没有问题,后来换成jsp页面,ajax动态加载数据进来后,问题就来了,由于ajax异步请求,两边表格发送请求加载数据有先后,之前静态页面测试好的行选功能就出了问题,每次刷新页面,只有后加载的部分才可以行选,之前加载的部分行选失效。自己控制台打印点击的状态
console.log(chkBoxStatus);测试发现前加载的部分总是打印两次false
true,而后加载的部分只打印一次false或是true。
我之前的行选代码段:
//行选功能 $("table tbody tr").click(function(event) { //遍历tr下的checkbox元素 var $check = $(this).find("input[type=checkbox]"); //判断非点击checkbox本身 if($check.length > 0 && event.target != $check[0]) { var chkBoxStatus = $check.is("input:checked"); console.log(chkBoxStatus); $check.prop("checked", !chkBoxStatus); } });
起初我认为我肯定是jquery功能代码不对,于是自己检查了html里id,class,发现并没有出错,于是我便一直在想为何控制台会意外打印两次,后面室友提示我说,试试在执行功能之前清除事件绑定,于是我便照做了用jquery 的
.unbind("click"),清除所有table上的click事件。结果!结果竟然成功了!!!两边的表格数据都可以正常进行行选功能,虽然是完成了预期功能,但是我当时不知道为什么要这样去做清除事件。后面我突然想到原来是执行了两次click事件的结果,每次先加载的数据,加载完毕后就被绑定click事件一次,后加载的数据加载完毕后,之前先加载的数据再次被绑定一次click事件,所以也就是为什么先加载的数据行选失效,打印两次false
true , 而后加载的数据行选正常,打印一次。
下面是修改后的代码:
//行选功能 $("table tbody tr").unbind("click");//清除table的所有click事件 $("table tbody tr").click(function(event) { //遍历tr下的checkbox元素 var $check = $(this).find("input[type=checkbox]"); //判断非点击checkbox本身 if($check.length > 0 && event.target != $check[0]) { var chkBoxStatus = $check.is("input:checked"); console.log(chkBoxStatus); $check.prop("checked", !chkBoxStatus); } });
虽然问题很小,但是也是学习,总之自己还是需要不断努力,完善自己。博文只是对自己的总结
原文地址:http://blog.csdn.net/Willerfu/article/details/50993186
相关文章推荐
- jQuery对表单元素的取值和赋值操作代码
- 【JQuery】下拉列表框的change事件
- jQuery-Form Vaildation小项目.
- 【JQuery】文本框的focus和blur事件
- JS原生方法实现jQuery的ready()
- jquery(dom操作方法)
- 关于表单的jQuery练习
- jquery ui widget原理解析
- jquery跟js初始化加载的多种方法及区别介绍
- jquery ajax 方法及各参数详解
- CSS3/jQuery自己定义弹出窗体
- 使用jQuery加载html页面到指定的div
- 使用jQuery设置disabled属性与移除disabled属性
- 【JQuery】调用trigger()方法手动触发指定的事件
- 【JQuery】使用one()方法绑定元素的一次性事件
- 【JQuery】toggle函数
- 10分钟-jQuery操作DOM元素
- 【JQuery】使用hover()方法切换事件
- 自定义jquery插件
- 【JQuery】页面加载时触发ready()事件