JQuery 与其他 JQuery 库冲突答案

【问题标题】：JQuery conflict with an other JQuery libraryJQuery 与其他 JQuery 库冲突
【发布时间】：2010-11-12 16:31:04
【问题描述】：

我使用 jquery 作为模块。我的 joomla 模板有一个集成的 jquery 菜单。所以他们互相冲突。

有没有办法解决这个问题。跟随模块的脚本代码

<script type="text/javascript" charset="utf-8">
    window.onload = function () {
        var container = jQuery('div.sliderGallery');
         var ul = jQuery('ul', container);

         var itemsWidth = ul.innerWidth() - container.outerWidth();

         jQuery('.slider', container).slider({
             min: 0,
             max: itemsWidth,
             handle: '.handle',
             stop: function (event, ui) {
                 ul.animate({'left' : ui.value * -1},340);
             },
             slide: function (event, ui) {
                 ul.css('left', ui.value * -1);
             }
         });
     };
</script>

【问题讨论】：

标签： jquery slider conflict

【解决方案1】：

解决问题需要做的是取消 jQuery 函数的别名并将其分配给另一个变量名（记住：变量可以是函数）。您需要使用jQuery.noConflict() 函数取消$() 函数的别名。这里有一个：

// ...after all of Joomla's JS is done executing...

// before loading your version of jQuery var jquery = {}; // aka new Object()
jquery.joomla = jQuery.noConflict(); // moves jQuery into another namespace

// load your version

现在，当您加载您的版本时，它将接管 jQuery 和 $ 命名空间，但如果您需要，您仍然可以引用 Joomla 的 jQuery 函数。再重复一遍，基本流程是：

加载 Joomla 的 jQuery
运行 Joomla 的 jQuery 相关代码
将 Joomla jQuery 移至另一个命名空间
加载你的 jQuery
使用$() 执行您的代码

【讨论】：

"将 Joomla jQuery 移动到另一个命名空间" - 这不是一个好主意，因为它可能会在稍后运行并寻找旧的命名空间，相反，您应该将新的 jQuery 重命名为 j$。

【解决方案2】：

试试

var J = jQuery.noConflict();

之后使用 J 变量而不是 $ 或 jQuery 作为您的自定义代码

【讨论】：

这个答案不够好。您必须指定要重新映射的库以使用“J”。把它写在错误的地方会导致不同的结果。
我不明白你的意思。解释一下。
这里的“jQuery”是什么来的？如何在不污染命名空间的情况下加载（特定版本的）jQuery？

【解决方案3】：

试试

jQuery.noConflict();

例如

<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        var container = jQuery('div.sliderGallery');
         var ul = jQuery('ul', container);

         var itemsWidth = ul.innerWidth() - container.outerWidth();
         jQuery.noConflict();
         jQuery('.slider', container).slider({
             min: 0,
             max: itemsWidth,
             handle: '.handle',
             stop: function (event, ui) {
                 ul.animate({'left' : ui.value * -1},340);
             },
             slide: function (event, ui) {
                 ul.css('left', ui.value * -1);
             }
         });
     });
</script>

我已更新您的代码以使用 jQuery 来检查已加载的文档。使用 noConflict 函数的详细信息是 here。

【讨论】：

我复制了您的代码并将其粘贴到我的文件中，但它并没有改变任何东西。我还需要做其他事情吗？

【解决方案4】：

您的意思是您的 joomla 同时加载了 2 种 jquery 吗？第一个你的菜单加载 jquery 然后你的模块加载 jquery ？

解决方案如下：在 joomla 模板中，我们可以覆盖模块或组件视图（我假设您必须使用 joomla 1.5.x 对吗？）

在您的模板中创建一个名为 html/ 的目录例如：模板/yourTemplate/html/
从 modules/mod_yourMenu/tmpl/.* 复制文件到你的模板 html (templates/yourTemplate/html/mod_yourMenu/) --> * 你不需要添加 tmpl/ *
编辑里面的php文件，全部删除加载 jquery 的标签
对使用 jquery 的模块执行步骤 1-3。
编辑您的模板，放置标签以加载最新版本的 jquery。

它现在应该可以工作了:)

【讨论】：

hm - 它可能有效，但如果您想在许多站点上使用此模块怎么办。我每次都必须执行此步骤。您知道其他解决方案吗？

【解决方案5】：

只是将您的 jq 脚本包装在一个自调用函数中。

(function($){
   $(document).ready(function(){

      $('div').click( function(){ alert('ding'); });

   });
})(jQuery);

这会创建一个私有范围，因此您不必担心任何冲突。您可以使用 jQuery.noConflict(); 跳过所有的不安；解决方案，您不必放弃那美妙的美元！当我知道还有其他代码块（例如，任何 cms）在工作时，我会根据习惯这样做——即使在我的测试之后添加了一个新的扩展，它也不应该破坏我的 jQuery。

jQuery Cookbook (http://listic.ru/jQuery_Cookbook.pdf - 第 1.17 章) 中有一个很好的概述。如果它对 Resig 来说足够好，我想它会对我有用！

【讨论】：