使用jQuery noConflict（）与script.aculo.us [英] Using jQuery noConflict() with script.aculo.us

问题描述

我有一个网站使用widget（来自 http://healcode.com ），其中包含 script.aculo.us JavaScript库。问题是我正在建立的网站是在WordPress，所以有经典的 jQuery vs script.aculo.us 冲突。

我知道我需要在 .noConflict（）模式中运行jQuery，但是我必须得到语法错误。当我将j $ .noConflict 的 $ 分配如下，它仍然会关闭script.aculo.us函数：

  var $ = jQuery.noConflict（）; 
 
 $（document）.ready（function（）{
 
 //＃nav-main dropdown effects 
 
 $（'＃nav-main （），$（$）$（$）$（$）$（$）$（$） ）{
 $（this）.find（'。dropdown'）。stop（true，true）.slideUp（'500'）; 
}）; 
}）; // end document.ready 
  

我知道我正在分配 $ 到 .noConflict（）模式中的jQuery，我假设script.aculo.us（通过主体中的小部件加载，因此AFTER jQuery）试图将 $ 重新分配给script.aculo.us。

我如何分配以下的方式将jQuery的 $ 以后，加载的script.aculo.us库不会冲突？我已经尝试过以下没有任何成功（以下代码导致script.aculo.us工作，但jQuery失败）：

  jQuery（document）.ready（function（）{
 
 //＃nav-main dropdown effects 
 
 jQuery（'＃nav-main ul li'）。 hoverIntent（function（）{
 jQuery（this）.find（'。dropdown'）。stop（true，true）.slideDown（'900'）;}，
 function（）{
 jQuery（this）.find（'。dropdown'）。stop（true，true）.slideUp（'500'）; 
}）; 
}）; // end document.ready 
  

编辑

上述代码的调试控制台输出是：

未捕获TypeError：对象＃< HTMLDocument>没有方法'ready'（匿名函数）所以document.ready失败，因为它分配给jQuery，这是不知不觉中正确加载...

编辑2

在下面发布的2（在本次更新时）的答案都没有解决问题，挣扎着。也许他们在技术上是正确的，但是他们没有解决我的问题。

解决方案

这对我来说是有效的，所以我可以有jQuery和 script.aculo.us /原型一起工作。信用转到代码可能为这个救生员！

而不是：

  jQuery（document）.ready（function（）{
 
 //在DOM上运行的代码准备好
 
}）; // End document.ready 
  

尝试这样：

（$）$（$）{

//在DOM上运行的代码准备好

}）（jQuery）; // End document.ready

I have a site using a "widget" (from http://healcode.com) that includes the script.aculo.us JavaScript library. The problem is that the site I'm building is on WordPress, so there's the classic jQuery vs script.aculo.us conflict.

I know that I need to run jQuery in .noConflict() mode, but I must be getting the syntax wrong. When I assign the $ to jQuery .noConflict as follows, it still shuts down the script.aculo.us functions:

var $ = jQuery.noConflict();

$(document).ready(function () {

    //#nav-main dropdown effects

    $('#nav-main ul li').hoverIntent(function () {
        $(this).find('.dropdown').stop(true,true).slideDown('900'); },
            function(){
                $(this).find('.dropdown').stop(true,true).slideUp('500');
        });
}); // end document.ready

I know that I am assigning the $ to jQuery in .noConflict() mode, and I assume that script.aculo.us (which loads via a widget in the main body, therefore AFTER jQuery) is trying to re-assign the $ back to script.aculo.us.

How can I assign the $ to jQuery in a way that the later-loaded script.aculo.us library won't conflict? I've already tried the following without any success (the following code causes script.aculo.us to work, but jQuery to fail):

jQuery(document).ready(function () {

    //#nav-main dropdown effects

    jQuery('#nav-main ul li').hoverIntent(function () {
        jQuery(this).find('.dropdown').stop(true,true).slideDown('900'); },
            function(){
                jQuery(this).find('.dropdown').stop(true,true).slideUp('500');
        });
}); // end document.ready

EDIT

The debug console output for the above code is:

Uncaught TypeError: Object #<HTMLDocument> has no method 'ready' (anonymous function) so the document.ready fails because it's assigned to jQuery, which is somehow not loading properly...

EDIT 2

Both of the 2 (at the time of this update) answers posted below do nothing to address the issue I'm struggling with. Perhaps they are technically correct, but they do not address my issue.

解决方案

This worked for me so that I can have jQuery and script.aculo.us/Prototype working well together. Credit goes to codeimpossible for this lifesaver!

Instead of:

jQuery(document).ready(function () {

    // Code to run on DOM ready

}); // End document.ready

Try this:

( function($) {

    // Code to run on DOM ready

} )( jQuery ); // End document.ready

这篇关于使用jQuery noConflict（）与script.aculo.us的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！