当我尝试初始化 jQuery 插件时，为什么会出现这些未捕获的类型错误？

Question

无法弄清楚这些未捕获的类型错误？我只是想使用一个简单的 jQuery 计数器插件...我网站上的其他插件工作正常：-/

错误：

Uncaught TypeError: Cannot set property 'counter' of undefined
Uncaught TypeError: Object [object Object] has no method 'counter' 

在我的页面上，我有这样的跨度：

<span class="counter counter-analog2" data-direction="up" data-format="23:59:59.9" data-stop="00:00:10.0" data-interval="100">0:00.0</span>

我已经在上面包含了 jQuery 插件和 css 文件，我从中初始化它们：

<script type="text/javascript" src="/templates/ja_wall/js/jquery.counter.js"></script>
<link rel="stylesheet" href="/templates/ja_wall/css/jquery.counter-analog2.css" type="text/css" media="all" />

然后在我准备好的 jQuery 文档中（代码比插件包含的低）我像这样初始化计数器插件：

$('.main_counter').counter({}); 

我完全被卡住了......也许它与需要无冲突模式的 jQuery 有关？任何帮助将不胜感激:)

Answer 1

看起来有另一个库正在覆盖 $ 变量。

counter 插件实现似乎有一些问题。在 jQuery 中 插件开发通常不直接使用$变量，而是使用jQuery变量并使用自执行匿名函数注入。

在您的情况下，一种解决方案可以是更改 jquery.counter.js 中的以下行

!(function (context, definition) {
  if (typeof define == 'function' && typeof define.amd  == 'object') define(['jquery'], definition);
  else definition(context['$']);
}(this, function ($) {

到

!(function (context, definition) {
  if (typeof define == 'function' && typeof define.amd  == 'object') define(['jquery'], definition);
  else definition(jQuery);
}(this, function ($) {

您同时使用jQuery 和mootools 都使用$ 变量来访问核心引擎。由于您首先包含了 mootools 库，其次包含了 jQuery，因此 jQuery 会覆盖 $ 变量，但对 jQuery.noConflict() 的任何调用都会恢复初始值。

在您的情况下，k2.noConflict.js 文件正在调用 var $K2 = jQuery.noConflict();，它替换了 $ 的原始值，在您的情况下为 mootools。

由于你调用了jQuery.noConflict()$变量将指向mootools，所以如果你想访问jQuery你需要使用变量jQuery或$K2。

插件的正常写法是as

(function($){
    $.fn.x=function(){
        ..... 
    };
})(jQuery);

Answer 2

插件似乎没有正确初始化。

尝试放置 $.noConflict(); 在你初始化你的插件之前？