jquery分頁外掛呼叫報錯的問題：$(.).pagination is not a function

侃哥發表於2018-04-19
jQueryFunction

問題描述：
分頁外掛jquery.pagination.js第一次初始化時分頁可用，後續再呼叫分頁則報錯$(.).pagination is not a function的問題。
注意：在呼叫基於jQuery擴充套件的外掛時，不能重複引用jQuery。
例如：首先引入jQuery-1.js，然後引入基於jQuery的外掛(jquery.pagination.js)，然後再次引入了jQuery-2.js檔案。這樣的做法就是不正確的。
因為此時基於jQuery的外掛(jquery.pagination.js)中的函式其實是擴充套件在第一次引入的jQuery-1.js物件上的，而在第二次引入的jQuery-2.js檔案載入完成之後會覆蓋jQuery-1.js，後續呼叫的jQuery方法其實都是第二次引入的jQuery-2.js檔案中的方法，此時的jQuery物件上沒有外掛的擴充套件方法。

以下程式碼詳細講解了整個js的執行過程：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-1.js"></script>
<script src="jquery.pagination.js"></script>
</head>
<body>
    <div id="page1"></div>
    <div id="page2"></div>
    <div id="page3"></div>
    <button type="button" id="btn"></button>
    
    <script>
    var page1 = $(`#page1`);//jquery-1物件
    $(`#page2`).pagination();//能正確呼叫
    
    console.log($.fn.jquery);//jquery-1的版本號
    console.log($.fn.pagination);//pagination擴充套件函式
    
    $(`#btn`).click(function(){
        console.log($.fn.jquery);//jquery-2的版本號
        console.log($.fn.pagination);//undefined
        
        page1.pagination();//能正確呼叫。 $.fn.pagination擴充套件在了jquery-1上
        $(`#page3`).pagination();//報錯。jquery-2已覆蓋jquery-1，此時呼叫的是jquery-2上的方法得到jquery-2物件
    });
</script>
    <script src="jquery-2.js"></script>
</body>
</html>

總結：在呼叫基於jQuery擴充套件的外掛時，注意不要重複引用jQuery。

相關文章