Question

我正在尝试实现一个名为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');')

我该如何调查？

Answer 1

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

Answer 2

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

<script>

      jQuery.noConflict();

// Use jQuery via jQuery(...)

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

    </script>

Answer 3

我做的是，我在标题的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副本？

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

3 个答案: