关于jQuery动态多次绑定的问题及解决

问题背景

主要是想利用

一个封装好的发送ajax请求的点击事件函数function page(pageNum，pageSize){}
网上现有的分页插件,在其中的回调函数里重新引用page函数

实现分页效果。

问题发现

插件的使用方式

<!DOCTYPE html>
<html>
        <head>
        <meta charset="UTF-8">
        <title>jquery兼容好的翻页</title>
        <link rel="stylesheet" type="text/css" href="css/zxf_page.css"/>
        <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>

        </script>
        <script type="text/javascript" src="js/zxf_page.js">

        </script>
        </head>
        <body>
<!--翻页-->
<div class="zxf_pagediv"></div>
<script type="text/javascript">
        //翻页
        $(".zxf_pagediv").createPage({
            pageNum: 20,
            current: 6,
            backfun: function(e) {
                //console.log(e);//回调
            }
        });
    </script>
</body>
</html>

View Code

分页插件效果

问题主要出在分页插件上，我找的分页插件是基于jQuery的，在其中的zxf_page.js脚本中，有这么一段绑定回调函数的内容

里面使用了on这个基于已有元素的动态绑定方法，将回调函数进行了绑定

  1 function page(pageNum,pageSize){
  2     //========前置处理
  3     $.ajax({
  4         //======发送相关数据
  5         success:function(result){
  6             if(result.code==0){
  7                 //=========JSON数据处理
  8 
  9                 //分页组件使用
 10                 //**************解决jQuery动态多次绑定的问题关键步骤*************
 11                 $(".pageComponent").remove();//将分页组件盒子div删除
 12                 $(".pageReference").before("<div class='pageComponent'></div>");//分页盒子的参考点
 13                 //**************解决jQuery动态多次绑定的问题关键步骤*************
 14 
 15                 //分页组件创建的脚本
 16                 $(".pageComponent").createPage({
 17                     pageNum: window.totalPage,
 18                     current: window.pageNum,
 19                     backfun: function (current){
 20                         page(current.current,5);
 21                         //console.info(current.current);
 22                     }
 23 
 24                 });
 25                 //========数据展示
 26             }
 27         }
 28     });
 29 }

View Code

最开始的处理中，jQuery的第10-13行的代码是没有写的，导致一个问题就是我点了一次分页的按钮之后，下次点击的时候浏览器越来越卡，而且甚至分页内容有时候都出不来（主要是因为ajax异步和我的分页处理有关），主要关注卡的问题。后来查看浏览器开发者模式的时候，里面元素查看器的元素的分页内容一块在我点击分页发送ajax之后，动态更新了好多次，然后就去找原因，过程挺曲折的，直接放答案。主要是因为jQuery的on函数的重复绑定^[1]问题，貌似和事件处理的冒泡规则以及命名空间有关有关，主要是因为ajax是局部刷新，然后分页容器又是在之前创建的,这是初始的页面构成.

  1   1 <!--分页组件容器-->
  2   2 <div class="pageComponent"></div>
  3   3 <div class="pageReference">
  4   4 	<!--分页内容容器-->
  5   5 </div>

然后导致zxf_page.js中的on方法多次绑定点击事件.

解决方案

解决办法的话有两种

在绑定之前先解绑,用off函数（具体实现可以自行搜索）
删除分页组件的容器（删除既有命名空间？），然后利用参考点重新创建。

个人采用的是后一种方法，具体实现就是在创建分页组件之前加了10-13行那一段代码

参考阅读

有一篇很好的博文居然忘记搜藏了 Sad smile ，里面讲是跟命名空间也有关系滴！

[1]Jquery on方法绑定事件后执行多次

[2]jquery之on()绑定事件和off()解除绑定事件(具体看最后一小段就行了)

[3]jquery的事件命名空间详解