關於jQuery動態屢次綁定的問題及解決

時間 2019-11-26

標籤關於 jquery 動態屢次綁定問題解決欄目 JQuery 简体版

原文原文鏈接

問題背景

主要是想利用javascript

一個封裝好的發送ajax請求的點擊事件函數function page(pageNum，pageSize){}
網上現有的分頁插件,在其中的回調函數裏從新引用page函數

實現分頁效果。css

問題發現

插件的使用方式html

<!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

分頁插件效果java

問題主要出在分頁插件上，我找的分頁插件是基於jQuery的，在其中的zxf_page.js腳本中，有這麼一段綁定回調函數的內容jquery

裏面使用了on這個基於已有元素的動態綁定方法，將回調函數進行了綁定ajax

  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方法屢次綁定點擊事件.異步

解決方案

解決辦法的話有兩種ide

在綁定以前先解綁,用off函數（具體實現能夠自行搜索）
刪除分頁組件的容器（刪除既有命名空間？），而後利用參考點從新建立。

我的採用的是後一種方法，具體實現就是在建立分頁組件以前加了10-13行那一段代碼函數

參考閱讀

有一篇很好的博文竟然忘記蒐藏了，裏面講是跟命名空間也有關係滴！

[1]Jquery on方法綁定事件後執行屢次

[2]jquery之on()綁定事件和off()解除綁定事件(具體看最後一小段就好了)

[3]jquery的事件命名空間詳解

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。