jquery分頁插件調用報錯的問題：$(.).pagination is not a function

時間 2019-12-06

標籤 jquery 分頁插件調用報錯問題 pagination function 欄目 JQuery 简体版

原文原文鏈接

問題描述：
分頁插件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對象上沒有插件的擴展方法。html

如下代碼詳細講解了整個js的執行過程：jquery

<!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。函數