浅谈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绑定事件会叠加的解决方法和心得总结全部内容了，希望大家多多支持我们~

赞 (0)

相关推荐

  • 浅谈jQuery hover(over, out)事件函数

    hover(over, out)事件函数 当鼠标移动一个匹配的元素上面,会触发指定的第一个函数 当鼠标移出这个元素时,会触发指定的第二个函数 over(function):鼠标移到元素上触发的函数 out(function):鼠标移出元素触发的函数 <nav class="main-nav"> <a href="/"><span>首页</span></a> <a href="/about&q

  • 详解jQuery中的事件

    详解jQuery中的事件

    大致介绍 jQuery增加了并扩展了基本的事件处理机制,不但提供了更加优雅的事件处理语法,而且极大地增强了事件处理能力 jQuery中的事件 加载DOM 在jQuery中是用$(document).ready()方法来替代JavaScript中的window.onload方法的,但是他们也有一些不同点 1.执行时机 例如我们有一个有很多图片的网页 $(document).ready()方法是在这个网页的DOM树加载完就可以执行的,而window.onload方法必须在DOM树加载完和图片都加载完

  • 利用JQuery阻止事件冒泡

    利用JQuery阻止事件冒泡

    冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个div上都添加了事件,如果点击里面的div我们希望处理这个div的事件,但是呢,我们不希望外层的div的事件也执行,这时候我们就要用到阻止冒泡. 通俗点来说吧,你在家里看电视,躲在自己的小房间,但是你不希望声音传到隔壁父母的耳朵里,这时候,你可能躲在被窝里,或者墙壁的隔音效果很好,阻隔声音可以理解为阻止冒泡. <style>

  • Jquery on绑定的事件 触发多次实例代码

    用'on'函数为一个新增的按钮绑定了一个事件,这是事件会触发多次. <html> <head> <meta name="viewport" content="width=device-width" /> <title>码上飘</title> <script src="/FrontStyle/js/jquery-1.11.2.min.js" type="text/javas

  • jQuery-mobile事件监听与用法详解

    本文实例讲述了jQuery-mobile事件监听与用法.分享给大家供大家参考,具体如下: 触摸事件 - 当用户触摸屏幕时触发(敲击和滑动) 滚动事件 - 当上下滚动时触发 方向事件 - 当设备垂直或水平旋转时触发 页面事件 - 当页面被显示.隐藏.创建.加载以及/或卸载时触发 一.初始化事件 1. ready 事件 页面加载完成 $(document).ready(function(){ //your code here... }); 2. 页面加载完成事件二 pageinit $(docume

  • jQuery的事件预绑定

    1. 预绑定 首先解释一下什么叫预绑定.预绑定,顾名思义,就是在Web页面上的控件还没出现之前就绑定好事件.预绑定主要是指jQuery中的.on()方法. 2. Demo HTML代码 <div id="root"> <input type="button" id="test" value="test"/> </div> 一般的jQuery代码: $('#root').find('#test

  • jQuery 移动端拖拽（模块化开发，触摸事件，webpack）

    通过jquery可以很容易实现CP端的拖拽.但是在移动端却不好用了.于是我自己写了一个在移动端的拖拽demo,主要用到的事件是触摸事件(touchstart,touchmove和touchend). 这个demo实现的功能是:可以拖拽的元素(在这里是图片)位于列表中,这些元素可以被拖到指定区域,到达指定区域(控制台)后,元素被插入控制台后,原来的拖动元素返回原位置,新的元素依然可以在控制台中拖动,也能拖出控制台. 在这个demo中一个用三个模块,分别为ajax模块,drag模块,position

  • 基于jQuery的select下拉框选择触发事件实例分析

    本文实例讲述了基于jQuery的select下拉框选择触发事件实现方法.分享给大家供大家参考,具体如下: 我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" onclick="func(0)">选项一</option> <option value="1" onclick="func(1

  • 浅谈jquery之on()绑定事件和off()解除绑定事件

    off()函数用于移除元素上绑定的一个或多个事件的事件处理函数. off()函数主要用于解除由on()函数绑定的事件处理函数. 该函数属于jQuery对象(实例). 语法 jQuery 1.7 新增该函数.其主要有以下两种形式的用法: 用法一: jQueryObject.off( [ events [, selector ] [, handler ] ] ) 用法二: jQueryObject.off( eventsMap [, selector ] ) 参数 参数 描述 events 可选/S

  • jQuery实现自动调用和触发某个事件的方法

    本文实例讲述了jQuery实现自动调用和触发某个事件的方法.分享给大家供大家参考,具体如下: 我以点击事件为例,研究一下这个话题: jQuery 自动触发点击事件 1.比如我们通过jquery定义了一个点击事件,我们如何自动触发他: $(function(){ $('#button').click(function(){ alert('button is clicking!'); }); }) 1)自动触发点击事件 $('#button').click(); 这大大出乎了 我的意料,我以为这样

  • 浅谈jQuery中Ajax事件beforesend及各参数含义

    Ajax会触发很多事件. 有两种事件,一种是局部事件,一种是全局事件: 局部事件:通过$.ajax来调用并且分配. $.ajax({ beforeSend: function(){ // Handle the beforeSend event }, complete: function(){ // Handle the complete event } // ... }); 全局事件,可以用bind来绑定,用unbind来取消绑定.这个跟click/mousedown/keyup等事件类似.但他

随机推荐