浅谈jQuery绑定事件会叠加的解决方法和心得总结
关于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);
}
});
虽然问题很小，但是也是学习，总之自己还是需要不断努力，完善自己。博文只是对自己的总结
以上就是小编为大家带来的浅谈jQuery绑定事件会叠加的解决方法和心得总结全部内容了，希望大家多多支持脚本之家~
相关文章
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
这篇文章主要介绍了jQuery插件HighCharts绘制2D半圆环图效果,结合实例形式分析了jQuery使用HighCharts插件绘制半圆环图形的相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-03-03
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
这篇文章主要介绍了IE下使用jQuery重置iframe地址时内存泄露问题解决办法,需要的朋友可以参考下2015-02-02
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
这篇文章主要介绍了jQuery中bind(),live(),delegate(),on()绑定事件方法,结合实例形式详细分析了bind(),live(),delegate(),on()方法绑定事件的具体使用技巧,并对比分析了四种方式的异同点,需要的朋友可以参考下2016-01-01
这篇文章主要为大家详细介绍了jQuery实现优雅弹窗效果 的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
jQuery基础框架:原型模式结构、返回选择器实例、访问原型方法、自执行匿名函数详细介绍，需要了解的朋友可以参考下2012-12-12
这篇文章主要介绍了jQuery中innerWidth()方法用法,实例分析了innerWidth()方法的功能、定义及获取第一个匹配元素内部区域宽度的使用技巧,需要的朋友可以参考下2015-01-01
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
之前项目中才用了Easy-ui，但是在同时使用tree和grid的效果时，因为页面有俩个URL,分别为Ajax树去后台取数据和Grid取数据，在IE9以上以及其他浏览器里都没有问题，在Ie低版本时会出现先加载表格，然后一闪而过加载树渲染页面，造成页面只有tree数据而没有表格grid数据。2014-06-06
用jQuery做网页换肤确实是很一个很巧妙，很好的选择，这是本人在学习jQuery中学的知识，感觉很有用，写了下来，希望大家有更好的方法或者代码不足的地方请谅解，本人也是初学者啊，希望大家互相勉励互相学习。2011-04-04
本文地址: jQuery Ajax 全解析 本文作者：QLeelulu2009-02-02
在DOM操作中，常常需要动态创建HTML内容，使文档在浏览器里的呈现效果发生变化，并且达到各种各样的人机交互目的.2016-04-04
最新评论