jQuery的自定义插件无法正常工作

我想添加自定义的jQuery插件。但我得到了错误的jQuery（...）。termifier不是一个函数....我敢肯定，有代码jQuery的自定义插件无法正常工作

对于刚刚测试我试图将代码从学习复制没有错误。 jquery.com

(function($) { 
    $.fn.greenify = function() { 
     this.css("color", "green"); 
     return this; 
    }; 
}(jQuery));

然后

jQuery('..').greenify();

返回我jQuery的错误（ '..'）。greenify不是一个函数

这是怎么回事???有谁知道这个的原因？

编辑

更多的代码。这greenify事情只是表明它不工作在标准的例子....

实际插件......这是目前摆只是在后来它被称为上ellements相同的文件，所以没问题与文件未找到..

(function($) { 
    $.fn.termifier = function(options) { 
    options = $.extend({ 
     lookupResource: 'getTerm', 
    flyoutClass: 'lookerUpperFlyout' 
    },options||{}); 

    this.attr('title','Click me for my definition!'); 

    return this.click(function(event){ 
    $.ajax({ 
     url: options.lookupResource, 
     type: 'get', 
     data: {term: this.innerHTML}, 
     dataType: 'html', 
    success: function(data) { 
     $('<div></div>') 
     .css({ 
      position: 'absolute', 
      left: event.pageX, 
      top: event.pageY, 
      cursor: 'pointer', 
      display: 'none' 
     }) 
     .html(data) 
     .addClass(options.flyoutClass) 
     .click(function(){ 
      $(this).fadeOut(1500,function(){$(this).remove();}); 
     }) 
     .appendTo('body') 
     .fadeIn(); 
     } 

    }); 
    return false; 
    }); 
}; 
    }(jQuery)); 


jQuery(document).ready(function(){ 
... 
jQuery('abbr').termifier({ 
    lookupResource: 'some.php' 
    }); 

});

我是很笨...

来源

2016-02-19 Aleksandra Chuprova

首先，确保你使用Joomla的API进口jQuery的，就像这样：

<?php 
    JHtml::_('jquery.framework'); 
?>

这将确保只有一个jQuery实例被导入，并且在noConflict模式下。

一旦这样做，你应该使用jQuery全球范围和$作为别名（可选）：

jQuery(document).ready(function($){ 
    $.fn.greenify = function() { 
     this.css("color", "green"); 
     return this; 
    }; 
});

希望这有助于

来源

2016-02-19 13:15:14 Lodder

谢谢！你的答案已经解决了！我已经把这个插件放在了文档准备好的功能中，它可以工作....但我仍然不明白为什么。这通常应该也是如果它被放在外面准备好吗？并且如果我想在另一个文件中单独加载它？ –

Joomla使用Mootools，因此我们通常使用的'$'有时会导致jQuery脚本和Mootools之间的冲突。这就是为什么我们使用'jQuery'作为全局作用域，'$'作为别名。它不会在DOM Ready以外的工作，因为它是一个jQuery插件 – Lodder

是的，我明白，这就是为什么我们使用noConflict（）函数（这也是jdoc的一部分：include type =“head”）。函数你不能使用$来调用jQuery，你必须把它作为jQuery来处理。这就是为什么我们把jQuery（document）.ready（）....而不是$（document）.ready（）。但是，如果我把jQuery.fn.greenify = ....替换所有的别名到jQuery - 这也不会在jQuery（document）.ready（）之外工作...这就是让我困惑的原因。这可能是名称空间中的一种冲突问题吗？ –

它的工作原理，但我认为你使用greenify（）添加的功能之前。

你能告诉我们更多的代码？

(function ($) { 
 

 
    $.fn.greenify = function() { 
 
     this.css("color", "green"); 
 
     return this; 
 
    }; 
 

 
    }(jQuery)); 
 
    
 
jQuery('#test').greenify();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p id="test"> 
 
    Black text? 
 
</p>

来源

2016-02-19 10:43:28 kaito

是的，我用同样的方式为你的例子显示。但对我的沮丧，它只是不会工作...我会编辑更多代码的问题... –

我猜你尝试调用的jQuery（ '..'）greenify（）。在插件加载之前。

你加它，如果文件准备就绪 - 调用插件以同样的方式

(function($) { 
    $.fn.greenify = function() { 
     this.css("color", "green"); 
     return this; 
    }; 
}(jQuery)); 
$(function() { 
    jQuery('..').greenify(); 
});

来源

2016-02-19 10:46:21 StilgarBF

我添加插件外（前，在同一个文件中）jQuery（document）.ready（function（）{... jQuery（“＃test”）。greenify（）; ...}）; –

jQuery的自定义插件无法正常工作

回答

相关问题