jQuery/原型冲突答案

【问题标题】：jQuery / prototype conflictjQuery/原型冲突
【发布时间】：2011-03-08 21:23:06
【问题描述】：

我正在使用 jQuery hoverIntent.js 脚本来创建一个巨型下拉菜单系统，该系统的灵感来自 Son Tonaka 的带有 CSS 和 jQuery 的巨型下拉菜单 sohtanaka.com/web-design/mega-drop-downs-w-css-jquery .我的页面包含一个由第三方供应商插入的prototype.js 脚本（这是一个加载属性搜索和潜在客户管理内容的房地产网站）。它在标签之前最后加载。我的菜单脚本和 jQuery 调用加载在标签的顶部。下面我包含了 2 个链接。我已经注释掉了对prototype.js 的调用的第一个链接，并且菜单工作正常。第二个链接调用了prototype.js，下拉菜单不起作用。

工作下拉：http://www.myreoforeclosures.com/_menutestfromcode.html（prototype.js 被注释掉）
不工作下拉：http://www.myreoforeclosures.com/_menutestfromcode2.html（prototype.js 工作）

我已经尝试了 jQuery 网站上建议的 jQuery noConflict() 解决方案的许多变体，但对于我的生活，我无法解决冲突。我已将上述链接简化为 CSS 和 HTML 的基础知识，以测试下拉菜单。

请注意，我正在使用 Web 2.0/CSS/jQuery 攀登陡峭的学习曲线，因为这是我第一次尝试使用这些工具设计网站（与以前基于表格的网站相比）。

任何帮助 jQuery 和原型一起工作的帮助将不胜感激。我只能控制 jQuery 脚本，因此必须对 jQuery 进行任何解决。我对prototype.js 没有任何控制权。

【问题讨论】：

感谢您的帮助。我花了很多时间寻找这个问题的解决方案。这是我发现的第一个地方，我得到比我更“了解”的人的质量帮助。其他网站似乎重申了这里找到的相同信息：api.jquery.com/jQuery.noConflict 和这里：docs.jquery.com/Using_jQuery_with_Other_Libraries。我还联系了下拉菜单的创建者和 hoverIntent 插件的创建者，但他们都说他们太忙了，无法提供帮助。再次感谢您的帮助。迈克
不知道为什么我之前没有想到这个，但是我在 Firefox 的错误控制台中发现了这个：错误：无效数组长度源文件：myreoforeclosures.idxco.com/javascript/prototype.js 行：30
我忘了提及，该错误表明使用原型的东西存在问题，不一定与 jQuery 冲突。这也可能是原型库本身的问题（可能是错误，您的副本有问题），但可能性较小。

标签： jquery prototypejs conflict hoverintent

【解决方案1】：

我也遇到了同样的问题！我正在使用 Jq 1.6.2 和一个prototype.js，带有“RangeError: Invalid array length”。

我几乎放弃了它，直到我使用了 Google 的原型 CDN 副本，一切都很好。我想现在的问题是什么错误已经解决了。

【讨论】：

【解决方案2】：

菜单似乎在两个 URL 上都对我有用。（火狐 3.6.4）

编辑：它们似乎对我有用，因为我首选的浏览器是带有 NoScript 的 Firefox。我没有注意到原型库来自不同的域。 =/

/headdesk

【讨论】：

感谢您查看此内容。两个链接都产生一个下拉菜单？我知道这可行：myreoforeclosures.com/_menutestfromcode.html 因为没有调用prototype.js，但由于与prototype.js 冲突，此版本不会产生下拉菜单myreoforeclosures.com/_menutestfromcode.html。
该死，我没有注意到第二个域。当然，两者都对我有用，因为我使用的是 NoScript。抱歉，迈克，如果我在 Chrome 或 IE 中检查过它，我会注意到其中一个确实无法正常工作。具有讽刺意味的是，我什至检查了这两个页面的来源，以确保其中一个确实有原型评论，但没有注意到该原型库的 URL 的细微差别。

【解决方案3】：

我怀疑jQuery.noConflict() 不起作用的原因是菜单代码继续使用$ 来引用jQuery 功能。 noConflict() 所做的只是解除$ 全局名称与jQuery 的绑定。

如果您有任何代码希望 $ 表示“jQuery”，则必须将其更改为使用 jQuery。否则，它将获取 Prototype $，这当然是完全不同的事情。

edit — 好的，我终于可以加载您的页面了（我认为我的网络有问题），所以我看到您一直在使用“$j”。因此，我认为菜单代码中的$ 问题不是问题，但我会在此处留下评论，因为noConflict() 仍然不是魔法。

再次编辑——我会按照 Patrick 的建议尝试 Prototype 1.4.2。

【讨论】：

Pointy - 抱歉，在您更新答案后删除了我的评论。 ;o)
嘿@patrick：您是否注意到页面上发生的错误似乎发生在 jQuery 中的某些内容（可能是一个数组）上调用“shift()”时，然后导致跳转进入原生方法的原型覆盖？我敢打赌这就是问题所在；它基本上是库的“Prototype-proofing”中的一个 jQuery 1.3.2 错误。
Pointy - 你可能正在做某事。我只是在使用 Safari 的开发者工具，我唯一看到的是 Prototype 中的一个错误：RangeError: Invalid array length. 我注意到的另一件事是 1.3.2 没有将window 传递到闭包中。不知道后果是什么，但如果 jQuery 没有干净的 window 对象，prototypejs 的 Array 的“原型设计”可能会溢出？不确定这是否有意义，但我认为你已经搞定了。
@patrick - myreoforeclosures.com/_menutestfromcode2-noHI-alert.html（警报有效）。感谢你的帮助。了解您是否还有其他事情要做并且需要稍后查看。

【解决方案4】：

如果该菜单不使用原型，您可以在新块中将 $ 变量重新定义为 jQuery（通过自执行匿名函数）。

(function ($) {
   // do stuff as usual
})(jQuery);

【讨论】：

【解决方案5】：

我看到您使用的是旧版本的 jQuery。你得到的是 1.3.2 而不是 1.4.2。

不确定它是否会有所作为，但不妨试试最新版本。

您可以直接从 Google 的 CDN 链接到它：

http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

【讨论】：

我现在在可以工作的页面（prototype.js 被注释掉）和不工作的页面（prototype.js 链接）上都使用 1.4.2。没有运气。
@Mike - 好吧，你的 jQuery 的其余部分似乎运行没有错误，所以这可能不是一个 noConflict 问题。此外，当您的 megaHoverOver 和 megaHoverOut 回调运行时，也会发生错误。所以我有一种感觉，它与 hoverIntent 插件无关。只是为了验证一下，能否请您删除 hoverIntent 配置，使其仅使用 jQuery 运行，这样我们就可以消除它？
@patrick - 在两个版本中都注释掉了 hoverIntent - myreoforeclosures.com/_menutestfromcode-noHI.html myreoforeclosures.com/_menutestfromcode2-noHI.html 删除会杀死它们 - 包括注释掉的 w/prototype.js。 -顺便说一句，感谢您的帮助。
@Mike - 对不起，我应该更清楚。我的意思是注释掉$j("ul#topnav li").hoverIntent(config);，并将其替换为传统的悬停：$j("ul#topnav li").hover(megaHoverOver,megaHoverOut);
@patrick - 像这样？ myreoforeclosures.com/_menutestfromcode-noHI.html（有效）myreoforeclosures.com/_menutestfromcode2-noHI.html（无效）。

【解决方案6】：

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

使用jQuery.noConflict() 方法。

Grz，克里斯。

【讨论】：

来自问题：“我已经尝试了 jQuery 网站上建议的 jQuery noConflict() 解决方案的许多变体”
好吧，也许不是我建议的那个。由于他没有提及，我们无法确定，所以我认为我的回答仍然有效。
我的意思是你没有添加任何有用的东西，因为 OP 知道 noConflict() 并且无法让它工作。而且您实际上并没有建议noConflict() 分辨率。你刚才说要使用它。
也许我没有得到这些论坛，但我告诉过：使用 jQuery.noConflict() 方法。我认为这是一个明确的建议。
问题是我无法让 jQuery noConflict() 解决方案工作。您的答案是使用 jQuery.noConflict() 方法。您的答案是做 OP 已经尝试过的事情。显然还有其他问题。