冲突：Bootstrap、Prototype Js和Jquery

Question

经过7天的搜索和尝试不同的解决方案，仍然没有解决问题，我想问一下： 我有一个页面使用了prototype js、protaplasm、scriptaculous、jquery和jquery-ui，它在使用jquery no conflict时能够完美运行，但最近下载了一个Bootstrap设计后就出现了问题。Prototype js的功能不再起作用，包括ajax更新和inplaceeditor以及scriptaculous。 我已经尝试了大多数解决方法，但并没有得到真正的结果。是否有人有可行的解决方案？

- John Max

---

http://www.softec.lu/site/DevelopersCorner/BootstrapPrototypeConflict - Christina

我早先尝试过这个，但它没有起作用。JQuery和Bootstrap可以工作，但Prototype JS和Scriptaculous不行。 - John Max

在尝试使用这些组件时，是否会抛出任何JS错误？ - TotalWipeOut

未捕获异常：controls.js 需要包含 script.aculo.us 的 effects.js 库 ReferenceError: Effect 未定义 dragdrop.js:8 TypeError：this.element.getStyle 不是一个函数 controls.js:498 TypeError：this.element.getStyle 不是一个函数 controls.js:498 TypeError：this.element.getStyle 不是一个函数 controls.js:498 TypeError：this.element.getStyle 不是一个函数 controls.js:498 TypeError：this.element.getStyle 不是一个函数 controls.js:498 TypeError：element.dispatchEvent 不是一个函数 prototype.js:7066但我确实有 effect.js。 - John Max

也许我在这里漏掉了什么。如何使用require.js引入prototype js。在你给我的例子中似乎没有包含prototype.js。 - John Max

Answer 1

我找到了答案。为避免Jquery、Prototype js、protoplasm和Twitter Bootstrap之间的冲突，首先在Jquery后面添加了jquery noconlict。

<script type="text/javascript">

    $.noConflict();

    </script>

我把所有 jQuery 代码都放在

标签之间。

 jQuery( document ).ready(function( $ ) {
// Code that uses jQuery's $ can follow here.


///////////////////////////////////////////////////////////////////////////////


///////////////////////////////////////////////////////////////////////////////

});

而且最重要的是，我打开了每个使用jquery的其他js文件，比如bootstrap.min.js，然后我复制并粘贴了代码在

之间。

 jQuery( document ).ready(function( $ ) {
    // Code that uses jQuery's $ can follow here.


    ///////////////////////////////////////////////////////////////////////////////


    ///////////////////////////////////////////////////////////////////////////////

    });

我仍然遇到一个错误，类似于TypeError: this.element是空的，在Firebug中控制.js文件，但一切都运行得很完美。

- John Max