jQuery与原型冲突

时间:2020-03-06 14:44:02  来源:igfitidea点击:

我在html页面中使用jQuery AutoComplete插件,在这里我也有使用原型的手风琴菜单。

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

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]

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

我的猜测是手风琴中使用的" effects.js"文件已被修改以获得手风琴演示输出。我还尝试使用jQuery需要避免与其他库冲突的重写方法,但这种方法不起作用。

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

并且可以从jQuery网站获得jQuery AutoComplete。

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

解决方案

jQuery允许我们将jQuery函数从$改名为其他名称,以避免名称空间与其他库冲突。

你可以做这样的事情

var J = jQuery.noConflict();

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

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

如果那不起作用,我们将需要使用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>

希望这有助于澄清情况。

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

我们可以使用Prototype(实际上是Scriptaculous)的Ajax.Autocompleter和抛弃jQuery,也可以使用jQuery的Accordion摆脱Prototype。

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

  • 它们可能导致冲突。
  • 通过将它们都包含在内,我们可以迫使用户同时下载它们。这不是束手无策的方法。