如何调试看似jQuery / MooTools的冲突?

时间:2012-11-05 14:46:03

标签: jquery joomla mootools conflict jquery-easing

我正在尝试实现一个名为Textify的jQuery插件,我在CodeCanyon上购买。

Textify需要jQuery,我正在使用Shape5的Vertex框架在Joomla 2.5环境中实现这个插件。

将插件集成到网站后,我得到5“'undefined'不是函数”错误。

开发网站位于http://sosdivorce.ergonomiq.net

由于Textify是一种商业产品,我觉得在线发布脚本并不舒服。

我得到的具体错误如下:

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');')

我该如何调查?

3 个答案:

答案 0 :(得分:3)

jQuery和Mootools都使用$符号作为库的捷径。我的建议是查看你的jquery代码并替换$ variable,看看是否有所作为。因此,例如,只要使用

调用jquery库,就可以完全禁用jQuery的$ alias
// Disable the $ global alias completely
jQuery.noConflict();

然后使用

进行jQuery脚本
(function($){

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

})(jQuery);

为了安全起见,我也会对你的mootools脚本做同样的事情:

(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);

在托管这些内容时,您可能需要将这些内容添加到脚本中。


编辑:

以您完成的方式编辑脚本没有任何问题。实际上最好的做法是设计插件与Joomla noConflict()!

CDN托管通常会使事情变得更复杂,你会以某种方式添加jQuery

<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将首先加载所有文件脚本,然后添加手写脚本。无论你添加它们的顺序是什么。即它会像

一样加载它们
<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(); - 这是一个更好的方法

答案 1 :(得分:0)

您是否尝试使用jQuery.moConflict();之类的内容:

<script>

      jQuery.noConflict();

// Use jQuery via jQuery(...)

      // Use Prototype/Mootools with $(...), etc.

    </script>

答案 2 :(得分:0)

我做的是,我在标题的include文件中替换了以下代码:

<!-- jQuery Scripts -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

<!-- Textify Scripts -->
<script type="text/javascript" src="<?php echo $s5_directory_path ?>/js/textify-min.js"></script>  
<script type="text/javascript">  
    $(document).ready(function (){    
      //Usage  
      $(".longText").textify();     
    });   
</script>

使用此代码:

<!-- jQuery Scripts -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
    jQuery.noConflict();
</script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

<!-- Textify Scripts -->
<script type="text/javascript" src="<?php echo $s5_directory_path ?>/js/textify-min.js"></script>  
<script type="text/javascript">  
    jQuery(document).ready(function (){    
      //Usage  
      jQuery(".longText").textify();     
    });   
</script>
乔治,你说我应该加

(function($){

位于顶部,

})(jQuery);

在每个jQuery插件的底部,我应该添加

jQuery.noConflict();

位于主jQuery文件的底部。

我所做的似乎有效,但也许这不是最佳做法。

另外,我该如何添加

jQuery.noConflict();

到CDN托管的jQuery副本?