jQuery和Prototype - 碰撞导致功能破坏

时间:2011-08-10 14:43:09

标签: prototypejs jquery

我正在为客户重构一个页面,而且我在页面上实现的jQuery代码存在一些问题。
有一个弹出式灯箱使用Prototype,它在页面加载时出现,然后在我放在那里使用jQuery的顶部和右侧有选框/滚动条。我真的不确定导致错误的原因。
我对jQuery的noConflict很熟悉,但是我在这个页面上已经尝试了几乎每一个变体而且我仍然得到一个错误 - 几秒钟后马戏团停止 - 并且IE显示“页面上的错误”对话框,引用行464(“必须为数组长度分配有限的正数”)。
这是页面:-link删除作者 -
这是prototype.js:-link由author-
删除

我完全不知道是什么导致了这个错误,JavaScript不是我最强的一面。

4 个答案:

答案 0 :(得分:2)

您可能需要浏览插件并将$(替换为jQuery(,因为您需要在无冲突模式下使用“jQuery ...”而不是“$ ...”。

答案 1 :(得分:2)

当我第一次看到这个错误时,我正在谷歌搜索更多一般的“Prototype + jQuery”错误,当我应该一直在寻找特定于我正在处理的确切问题的解决方案。
添加术语“数组长度”和“第464行”实际上使我找到了解决这个特定问题的方法,这里是:

  1. 从原型v1.4更新到v1.5.1.2(v1.7,最新版本, 没有正常工作甚至产生堆栈溢出错误)。
  2. 更改了脚本的顺序,并更改了noConflict:

    <script src="/scripts/jquery-1.5.2.js" type="text/javascript"></script> 
    <script src="/scripts/jquery.Scroller-1.0.src_4.js" type="text/javascript"></script><!-- all _$_'s replaced with _jQuery_ -->
    <script type="text/javascript">
    <!--
    // more jquery, all $'s replaced with jQuery
    -->
    </script>
    <script type="text/javascript"> 
    <!--
    jQuery.noConflict();
    -->
    </script>       
    <script src="scripts/prototype-1.5.1.2.js" type="text/javascript"></script> 
    <script type="text/javascript">
    <!--
    // everything else, including prototype scripts
    -->
    </script>
    
  3. 就是这样!现在我没有得到“Line 464”错误,所有脚本都运行正常。 感谢@Ken和@Diodeus带领我找到解决方案。

答案 2 :(得分:2)

使用jQuery和

包围代码
(function ($) {
... // Your code
})(jQuery)

这种方式使用本地$,它只绑定到jQuery和jQuery。

同样在同一网站上使用这两个框架也是一个坏主意。你可以找到几乎所有Prototype插件的jQuery替换。

答案 3 :(得分:0)

我会在同一个库中找到插件。 jQuery包含你提到的所有插件,所以没有必要尝试使用它们。这两个库很难一起工作。

如果您已开始使用这两个库,请尝试以下顺序:
1)其他的lib 2)jquery
3)noconflict呼叫
4)所有插件

<script src="scripts/prototype.js" type="text/javascript"></script> 
<script src="/scripts/jquery-1.5.2.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
<!--
    $.noConflict();
-->
</script>
<script src="/scripts/jquery.Scroller-1.0.src_3.js" type="text/javascript"></script>
<script src="scripts/lightbox.js" type="text/javascript"></script>