jQuery / prototype 冲突

Question

jQuery / prototype 冲突

10

我正在使用一个jQuery hoverIntent.js脚本来创建一个超级下拉菜单系统，灵感来自Son Tonaka的mega drop down w/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 noConflict()解决方案，在jQuery网站上提出了建议，但是我无论如何都无法解决冲突。我已经将以上链接简化为CSS和HTML的基础知识，以测试下拉菜单。

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

任何有助于使jQuery和prototype.js共同工作的帮助都将不胜感激。我只控制jQuery脚本，因此任何解决方案必须针对jQuery进行。我无法控制prototype.js。

- Mike B

1

感谢您的帮助。我花了很多时间寻找解决这个问题的方法。这是我第一次在这里找到高质量的帮助，比我更懂行的人提供了帮助。其他网站似乎只是重复这里找到的相同信息：http://api.jquery.com/jQuery.noConflict/ 和 http://docs.jquery.com/Using_jQuery_with_Other_Libraries。我也联系了下拉菜单和hoverIntent插件的创建者，但他们都说太忙无法帮助。再次感谢您的帮助。迈克 - Mike B

不知道为什么我之前没想到，但我在Firefox的错误控制台中找到了这个信息：错误：无效的数组长度。源文件：http://www.myreoforeclosures.idxco.com/javascript/prototype.js，行号：30。 - George Marian

我忘了提到，该错误指示某个正在使用原型的东西存在问题，不一定是与jQuery冲突。这也可能是原型库本身存在问题（可能是一个bug，或者是你的副本存在问题），但这种情况较少见。 - George Marian

6个回答

1

我也有同样的问题！我使用的是Jq 1.6.2和prototype.js，在使用过程中出现了“RangeError: Invalid array length”错误。

我差点就放弃了，直到我使用了Google的CDN复制版的prototype.js，一切都正常了。我想可能是之前出现的问题已经得到解决了。

- Audacitus

1

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

不确定是否会有所不同，但也许可以尝试最新版本。

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

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

- user113716

我现在在工作的页面（prototype.js已注释）和不工作的页面（prototype.js已链接）上都使用1.4.2版本。没有运气。 - Mike B

@Mike - 抱歉，我应该更清楚地表达。我的意思是将$j("ul#topnav li").hoverIntent(config);注释掉，并用传统的hover替换它：$j("ul#topnav li").hover(megaHoverOver,megaHoverOut); - user113716

@patrick - http://www.myreoforeclosures.com/_menutestfromcode2-noHI-alert.html（警报有效）。感谢您的帮助。如果您有其他事情要做并需要稍后查看此内容，我们会理解的。 - Mike B

@Mike - 没关系。我今天只是在外面工作，并且每隔一段时间检查一次。使用你的最新版本，我看到了一个持续不断的“无效数组长度”错误，速率约为每秒100个。我们知道这不是插件的问题，因为你用jQuery的hover也会出现同样的问题。我注意到在你的megaHoverOver()函数中有一个自执行函数，它通过calcSubWidth()扩展了jQuery。你应该将其移出megaHoverOver()函数，因为它只需要运行一次以扩展jQuery。然而，这不是问题所在。 - user113716

@patrick - 感谢您花时间帮助。我会做更多的研究。通过阅读所有这些内容，我学到了很多。 - Mike B

显示剩余5条评论

0

如果该菜单没有使用原型，您可以通过一个自执行匿名函数在新的代码块中重新定义$变量为jQuery。

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

- Cristian Sanchez

0

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

使用jQuery.noConflict()方法。

敬礼，Kris。

- Kris van der Mast

从这个问题来看：“我已经尝试了jQuery网站上建议的许多jQuery noConflict()解决方案的变化。” - user113716

也许不是我建议的那个。由于他没有提到它，所以我们不能确定，因此我认为我的答案仍然是有效的。 - Kris van der Mast

1

我的观点是，由于OP已经知道了noConflict()但无法使其正常工作，因此您并没有添加任何有用的内容。而且你并没有真正提出noConflict()的解决方案，你只是说要使用它。 - user113716

也许我没有理解这些论坛，但我建议使用jQuery.noConflict()方法。我认为这是一个明确的建议。 - Kris van der Mast

1

问题是“我无法使jQuery noConflict()解决方案起作用”。你的答案是“使用jQuery.noConflict()方法”。你的答案是做与OP已经尝试过的相同的事情。显然还有其他问题。 - user113716

调用 noConflict() 并不能神奇地修复所有可能的命名空间冲突问题。在调用 noConflict() 之后，仍然需要处理使用 $ 并期望其意思为 jQuery 的代码将无法正常工作的事实。 - Pointy

0

菜单在这两个网址上对我来说似乎都可以使用。(Firefox 3.6.4)

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

/headdesk

- George Marian

感谢您查看此内容。这两个链接都会生成下拉菜单吗？我知道这个链接有效：http://www.myreoforeclosures.com/_menutestfromcode.html，因为它没有调用prototype.js，但是由于与prototype.js的冲突，该版本无法生成下拉菜单http://www.myreoforeclosures.com/_menutestfromcode.html。 - Mike B

真糟糕，我没有注意到第二个域名。当然两个都对我有用，因为我使用NoScript。抱歉Mike，如果我在Chrome或IE中检查它，我会注意到其中一个确实不起作用。讽刺的是，我甚至检查了这两个页面的源代码，以确保其中一个已经注释了prototype，但没有注意到该原型库URL的细微差异。 - George Marian

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pointy · Accepted Answer

我怀疑 jQuery.noConflict() 无法正常工作的原因是菜单代码继续使用 $ 来引用 jQuery 功能。所有 noConflict() 所做的就是将全局名称 $ 从 jQuery 中解除绑定。

如果您有任何期望 $ 意味着 "jQuery" 的代码，那么它必须被更改为使用 jQuery。否则，它会选择 Prototype 的 $，这当然是完全不同的东西。编辑 - 好吧，我最终让你的页面加载了（我想我的网络出了问题），所以我看到你一直在使用 "$j"。因此，我认为菜单代码中的 $ 问题不是问题，但我还是会留下评论，因为 noConflict() 并不是神奇的。 再次编辑 - 我会尝试 Patrick 的建议，尝试 Prototype 1.4.2。