如何调试似乎是jQuery/MooTools冲突的内容? [英] How to debug what appears to be a jQuery/MooTools conflict?

问题描述

我正在尝试实现我在CodeCanyon购买的名为Textify的jQuery插件.

I am attempting to implement a jQuery plugin called Textify which I purchased on CodeCanyon.

Textify需要jQuery，我正在使用Shape5的Vertex框架在Joomla 2.5环境中实现此插件.

Textify requires jQuery, and I am implementing this plugin in a Joomla 2.5 environment using the Vertex framework from Shape5.

将插件集成到网站中后，我收到5个'未定义'不是函数"错误.

After integrating the plugin into the site, I am getting 5 "'undefined' is not a function" errors.

开发人员站点位于 http://sosdivorce.ergonomiq.net

由于Textify是一种商业产品，因此我不愿意在网上发布脚本.

As Textify is a commercial product, I don't feel comfortable posting the script online.

我遇到的具体错误如下:

The specific errors I am getting are as follows:

Error in file: http://sosdivorce.ergonomiq.net/templates/shape5_vertex/js/multibox/overlay.js

    Type Issue
    'undefined' is not a function (evaluating '$(window).addEvent('resize',function(){s5_resize_overlay();});')

Error in file: http://sosdivorce.ergonomiq.net/templates/shape5_vertex/js/s5_info_slide.js

    Type Issue
    'undefined' is not a function (evaluating '$(window).addEvent('resize',function(){s5_is_tobind();});')

Error in file: http://sosdivorce.ergonomiq.net/templates/shape5_vertex/js/s5_responsive_mobile_bar.js

    Type Issue
    'undefined' is not a function (evaluating '$(window).addEvent('resize',s5_responsive_mobile_login_register);')

Error in file: http://sosdivorce.ergonomiq.net/templates/shape5_vertex/js/s5_columns_equalizer.js

    Type Issue
    'undefined' is not a function (evaluating '$(window).addEvent('resize',s5_load_resize_columns);')

Error in file: http://sosdivorce.ergonomiq.net/templates/shape5_vertex/js/s5_flex_menu.js

    Type Issue
    'undefined' is not a function (evaluating '$(this.options.id).getElements('li, span.grouped_sub_parent_item');')

我该如何调查?

推荐答案

jQuery和Mootools都使用$符号作为库的快捷方式.我的建议是浏览您的jquery代码并替换$变量，看看是否有区别.因此，例如，您可以在使用

jQuery and Mootools both use the $ symbol as a short cut for the libraries. My advice would be to look through your jquery code and replace the $ variable and see if that makes a difference. So for example you could disable the $ alias for jQuery completely as soon as you call the jquery library using

// Disable the $ global alias completely
jQuery.noConflict();

然后将jQuery脚本用于

And then for jQuery scripts use

(function($){

// set a local $ variable only available in this block as an alias to jQuery
... here is your jQuery specific code ...

})(jQuery);

为了安全起见，我还会对您的mootools脚本执行相同的操作:

To be safe I'd also do the same sort of thing to your mootools scripts:

(function($){

// set a local $ variable only available in this block as an alias 
// to Mootools document.id
... here is your Mootools specific code ...

})(document.id);

在托管这些主机时，您可能需要将它们添加到脚本中.

As your hosting these you may need to add these into your scripts.

按照您的方式编辑脚本没有错.实际上，最佳实践是在设计插件时牢记Joomla noConflict()！

There's nothing wrong with editing the scripts the way you have done. Actually best practice would be to design plugins with Joomla noConflict() in mind!

CDN托管确实会使事情变得更加复杂，通常您会以这种方式添加jQuery

CDN hosting that does make things more complex normally you'd add jQuery in a way such that

<script src="PATH TO GOOGLE ETC" type="text/javascript" />
<script type="text/javascript">
    jQuery.noConflict();
</script>
<script src="PATH TO SCRIPTS" type="text/javascript" />

在joomla网站上出现的问题是joomla将首先加载所有文件脚本，然后再添加手写脚本.无论您以何种顺序添加它们，即它将像

The issue with this on a joomla site is that joomla will load all file scripts first and THEN add in the handwritten scripts. Whatever order you add them in in. i.e. It will load them like

<script src="PATH TO GOOGLE ETC" type="text/javascript" />
<script src="PATH TO SCRIPTS" type="text/javascript" />
<script type="text/javascript">
    jQuery.noConflict();
</script>

即使以相反的方式插入它们！因此，我建议将其插入jQuery文件本身的方式略显丑陋且编码欠佳.我建议在本地托管jQuery文件.这不是有史以来最漂亮的方法-也不是最理想的方法，但这是我在Joomla中了解的唯一解决该烦人事实的方法.但是，如果您可以在加载jQuery插件之前手动在jQuery下面添加jQuery.noConflict();，则这是一种更好的方法

Even if they are inserted the other way around! Hence I suggested the slightly ugly and less well coded way of inserting it into the jQuery file itself. I'd advise locally hosting the jQuery file. It's not the prettiest method ever - or most ideal but it's the only way I know of in Joomla to get around this annoying fact. BUT if you can manually add in the jQuery.noConflict(); in beneath the jQuery before you load the jQuery plugins - this is a much better method

这篇关于如何调试似乎是jQuery/MooTools冲突的内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！