jQuery 和原型冲突

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/134572/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 08:42:29  来源:igfitidea点击:

jQuery & Prototype Conflict

jqueryautocompleteprototypejsaccordionconflict

提问by John Resig

I am using the jQuery AutoComplete plugin in an html page where I also have an accordion menu which uses prototype.

我在一个 html 页面中使用 jQuery AutoComplete 插件,其中我还有一个使用原型的手风琴菜单。

They both work perfectly separately but when I tried to implement both components in a single page I get an error that I have not been able to understand.

它们都可以完美地单独工作,但是当我尝试在单个页面中实现这两个组件时,我收到了一个我无法理解的错误。

uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMViewCSS.getComputedStyle]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: file:///C:/Documents and Settings/Administrator/Desktop/website/js/jquery-1.2.6.pack.js :: anonymous :: line 11" data: no]

未捕获的异常:[异常...“组件返回失败代码:0x80004005(NS_ERROR_FAILURE)[nsIDOMViewCSS.getComputedStyle]” nsresult:“0x80004005(NS_ERROR_FAILURE)”位置:“JS框架:: file:///C:/Documents and Settings /Administrator/Desktop/website/js/jquery-1.2.6.pack.js :: 匿名 :: 第 11 行”数据:无]

I found out the file conflicting with jQuery is 'effects.js' which is used by the accordion menu. I tried replacing this file with a newer version but newer seems to break the accordion behavior.

我发现与 jQuery 冲突的文件是手风琴菜单使用的“effects.js”。我尝试用较新版本替换此文件,但较新版本似乎破坏了手风琴行为。

My guess is that the 'effects.js' file used in the accordion was modified to obtain the accordion demo output. I also tried using the overriding methods jQuery needs to avoid conflict with other libraries and that did not work.

我的猜测是修改了手风琴中使用的“effects.js”文件以获得手风琴演示输出。我还尝试使用 jQuery 需要的覆盖方法来避免与其他库发生冲突,但没有奏效。

I obtained the accordion demo from stickmanlabs.com.

我从stickmanlabs.com获得了手风琴演示。

And the jQuery AutoComplete can be obtained from jQuery site.

jQuery AutoComplete 可以从jQuery 站点获得。

Has any one else experienced this issue?

有没有其他人遇到过这个问题?

回答by John Resig

There are two possible solutions: There was a conflict with an older version of Scriptaculous and jQuery (Scriptaculous was attempting to extend the native Array prototype incorrectly) - first try upgrading your copy of Scriptaculous.

有两种可能的解决方案: 旧版本的 Scriptaculous 和 jQuery 存在冲突(Scriptaculous 试图错误地扩展本机 Array 原型) - 首先尝试升级您的 Scriptaculous 副本。

If that does not work you will need to use noConflict()(as alluded to above). However, there's a catch. Since you're including a plugin you'll need to do the includes in a specific order, for example:

如果这不起作用,您将需要使用noConflict()(如上所述)。但是,有一个问题。由于您要包含一个插件,因此您需要按特定顺序进行包含,例如:

<script src="jquery.js"></script>
<script src="jquery.autocomplete.js"></script>
<script>
  jQuery.noConflict();
  jQuery(document).ready(function($){
    $("#example").autocomplete(options);
  });
</script>
<script src="prototype.js"></script>
<script src="effects.js"></script>
<script src="accordion.js"></script>

Hope this helps to clarify the situation.

希望这有助于澄清情况。

回答by Tahir Akhtar

jQuery lets you rename the jQuery function from $to something else to avoid namespace conflicts with other libraries.

jQuery 允许您将 jQuery 函数重命名为$其他名称,以避免与其他库发生命名空间冲突。

You can do something like this

你可以做这样的事情

var J = jQuery.noConflict();

Details here: michaelshadle.com — jQuery's no-conflict mode: yet another reason why it's the best

此处的详细信息:michaelshadle.com — jQuery 的无冲突模式:它是最好的另一个原因

回答by Fczbkk

I don't really see the reason for using both libraries at the same time in this case.

在这种情况下,我真的不明白同时使用两个库的原因。

You can either use Prototype's (well, Scriptaculous' actually) Ajax.Autocompleterand ditch jQuery, or you can use jQuery's Accordionand get rid of Prototype.

您可以使用 Prototype 的(嗯,实际上是 Scriptaculous)Ajax.Autocompleter放弃jQuery,或者您可以使用 jQuery 的Accordion并摆脱 Prototype。

Using both libraries at once is not really a good idea, because:

同时使用这两个库并不是一个好主意,因为:

  1. They can cause conflicts.
  2. By including them both you force your users to download them both. Which is not bandwith friendly approach.
  1. 它们会引起冲突。
  2. 通过将它们都包含在内,您可以强制您的用户同时下载它们。这不是带宽友好的方法。