jquery分页插件调用报错的问题:$(.).pagination is not a function
问题描述:
分页插件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。
相关推荐
zhanggang 2018-10-23
82473264 2015-05-12
amberom 2020-01-06
时光如瑾雨微凉 2020-03-04
luadenis0 2019-08-30
Lius 2019-06-19
zh000 2015-07-22
OpsDevOps 2019-06-25
88304694 2019-06-25
SeekerTime 2019-06-21
yyzhu 2012-03-18
DHCliaozheng 2017-03-12
spb 2017-12-28
程序员哦 2016-12-23
Chinahdy 2016-12-23
gigizhui 2016-12-17
Wmeng0 2018-01-26
genglang 2016-06-03