两个 jQuery 脚本之间的冲突答案

【问题标题】：Conflict between two jQuery's scripts两个 jQuery 脚本之间的冲突
【发布时间】：2011-08-12 15:00:52
【问题描述】：

我是西班牙人（对不起我的英语），这是我第一次在这里写信问一些事情。

经过数小时的调试和搜索 Fancybox 脚本无法运行的原因后，我搜索了我网站中两个脚本之间的冲突（现在处于维护模式）

我在我的网站上使用了一些脚本，但我可以肯定地说这两个脚本之间存在冲突：

http://www.planetdescargas.com/wp-content/themes/bigfoot/javascripts/jquery.mousewheel-3.0.4.pack.js    
http://www.planetdescargas.com/wp-content/themes/bigfoot/javascripts/jquery.fancybox-1.3.4.pack.js

与

http://www.planetdescargas.com/wp-content/plugins/buddypress/bp-themes/bp-default/_inc/global.js?ver=3.0.5

前两个脚本是jquery插件“fancybox”，另一个是wordpress插件的主要javascript（Ajax）：BuddyPress。

后者在fancybox 中产生冲突。如果我删除 BuddyPress 的脚本，fancybox 可以完美运行，但如果没有，fancybox 将无法运行。

BuddyPress 的脚本 global.js 在一开始就定义了一个变量，该变量是创建脚本的变量。我尝试这样定义：

var jq = jQuery.noConflict();

但还是不行。

有什么建议吗？

在 Firebug 控制台中我得到了这个：

c.easing[this.options.specialEasing && this.options.specialEasing[this.prop] || a] is not a function

[Detener en este error] e,this.options.orig[e]);this.options.c...++)ab||a.splice(b--,1);a.length| |

第 143 行

http://www.planetdescargas.com/wp-includes/js/jquery/jquery.js?ver=1.4.2

谢谢

【问题讨论】：

好吧，当 global.js 脚本在页面中时，Fancybox 不起作用
Juan：请使用 Chrome 或 FireFox，然后分别打开开发者工具或 FireBug 并检查控制台是否有错误。我认为会出现错误，因为您的脚本没有执行任何操作，因此请使用错误消息编辑您的问题。
在 Firebug 控制台中我得到了这个： c.easing[this.options.specialEasing && this.options.specialEasing[this.prop] || a] 不是函数 [Detener en este error] e,this.options.orig[e]);this.options.c...++)a[b]()||a.splice(b-- ,1);a.长度|| planetdescargas.com/wp-includes/js/jquery/jquery.js?ver=1.4.2的第 143 行
请尝试删除noConflict() 函数。我可以很容易地想象杀死其他脚本。
无论是否使用 noConflict()，我都会遇到同样的错误

标签： jquery fancybox conflict buddypress

【解决方案1】：

这样用就行了。

打开wp-content/plugins/buddypress/bp-themes/bp-default/_inc/global.js

加在上面：

jQuery.noConflict (jquery_working =! html bind);

转到 #1264
行在下面添加：

;(function(jQuery){  ///Add this before start jQuery.easing.
  jQuery.easing.jswing=jQuery.easing.swing;jQuery.extend(jQuery.easing, {def:"easeOutQuad",swing:function(e,f,a,h,g){return ......
  // ...
})(jQuery); //Add this end of the call.

同样可以解决jQuery Cookie插件冲突错误。

【讨论】：

【解决方案2】：

这不是您使用jQuery.noConflict() 的方式。 noConflict() 释放对 $ 符号的控制。不过，从我从您的其他脚本中看到的情况来看，它们使用安全方式 ((function($){ }(jQuery)))，因此使用 noConflicts() 没有实际效果。

改变这个

var jq = jQuery.noConflict ();

进入这个：

jQuery.noConflict ();
var jq = jQuery;

为了确定。

文档：http://api.jquery.com/jQuery.noConflict/

【讨论】：

还是不行。我正在使用 Wordpress 的 jQuery。 Global.js 是作为依赖加载的，fancybox 不，我不知道这是否相关

【解决方案3】：

我不知道出了什么问题，但我解决了问题。我在我的主题根目录中的 functions.php 中使用此代码：

    function fancybox_js() {
            wp_enqueue_script('jquery.fancybox', 'http://www.planetdescargas.com/wp-content/themes/bigfoot/javascripts/fancybox/jquery.fancybox-1.3.4.pack.js', array('jquery'), '1.3.4');
            wp_enqueue_script('jquery.easing', 'http://www.planetdescargas.com/wp-content/themes/bigfoot/javascripts/fancybox/jquery.easing-1.3.pack.js', array('jquery'), '1.3');
            wp_enqueue_script('jquery.mousewheel', 'http://www.planetdescargas.com/wp-content/themes/bigfoot/javascripts/fancybox/jquery.mousewheel-3.0.4.pack.js', array('jquery'), '3.0.4');
    }

add_action('wp_enqueue_scripts', 'fancybox_js', 999);

我从一个名为 Easy Fancybox 的 wordpress 插件中获取了这些库，现在一切正常。谢谢！

【讨论】：