Mootools 破坏 jQuery 功能答案

【问题标题】：Mootools breaking jQuery functionalityMootools 破坏 jQuery 功能
【发布时间】：2012-02-23 18:47:42
【问题描述】：

Mootools 出现问题，破坏了我的幻灯片脚本 jQuery 功能。无法确定发生了什么，但特别是在 Firefox 中，它正在破坏功能并使我的浏览器无响应。

http://newsite.matthewruddy.com/

谁能告诉我我做错了什么？我在适当的地方使用了 jQuery.noConflict() 但没有骰子。 Firebug 似乎没有显示任何错误，并且当 MooTools 脚本被禁用时，一切都很好。此外，在其他浏览器中似乎不那么麻烦，但在 Safari、Chrome 等中仍然会出现奇怪的情况。大多数情况下它都可以正常工作（非常偶然）。

jQuery 是在 MooTools 之前加载的，但我的插件加载的脚本在 MooTools 加载之后的页脚中。无法真正解决这个问题，因为使用 Wordpress，这是我可以让脚本仅加载到使用幻灯片的页面上的唯一方法。

【问题讨论】：

尝试同时使用两个 JS 库通常不是最好的主意，因为它们真的会互相影响。由于 jQuery 和 Mootools 几乎做同样的事情，最好只使用其中一个。
@robbrit 打算投票，直到“因为 jQuery 和 Mootools 几乎都在做同样的事情”。看看jqueryvsmootools.com。话虽如此，我同意选择最适合您的编程习惯和项目需求的方法。如果必须同时使用，请将 jQuery 置于 noConflict 模式并同时使用这两个库不要使用 $ 使用 jQuery 的 jQuery 和 document.id 的 mootools
我不是故意使用这两个。我的插件（幻灯片）使用 jQuery。许多用户使用使用 MooTools 的特定插件，他们向我报告说它导致我的插件出现故障。这个特定的插件还在所有页面（MooTools 和其他两个）上加载了它的脚本，所以我试图弄清楚我可以做些什么来防止引起的错误。很多用户都报告了问题。

标签： jquery mootools conflict

【解决方案1】：

问题似乎与load 事件冲突。 Riva Slider 插件在对象上触发 load，但不是触发 jQuery load 事件，而是触发 mootools load。出于某种原因，这会导致 mootools 一遍又一遍地通过 AJAX 检索您网站的索引，从而导致 FF 冻结。我会尝试让 jQuery 在 mootools 之前加载，或者只是转储其中一个。混合框架确实不是一个好主意。

编辑：另外，你说你在 mootools 之前加载 jQuery，但你没有。 mootools 在<head> 中加载，而 jQuery 直到页面底部，插件之前才加载。

【讨论】：

感谢您的解释。说之前加载了 jQuery 是错误的；在这种情况下不是。我之前的设置（本地 MAMP 设置）在 MooTools 之前加载了 jQuery，但问题是一样的。我能做些什么来防止 MooTools 加载吗？我宁愿不必建议用户在使用此插件时不要使用我的插件，特别是因为很多用户都这样做。
@MatthewRuddy 我对 MooTools 了解不多。也许您可以检查您的插件以查看是否已加载 MooTools，如果是，请删除可能已由 MooTools 注册的所有事件。 mootools.net/docs/core/Element/…

【解决方案2】：

在 Mootools 之前使用 jquery 这里是一个示例脚本。

<script type="text/javascript" src="jquery-1.3.js"></script>
<script type="text/javascript">
    //no conflict jquery
    jQuery.noConflict();
    //jquery stuff
    (function($) {
        $('p').css('color','#ff0000');
    })(jQuery);
</script>
<script type="text/javascript" src="moo1.2.js"></script>
<script type="text/javascript">
    //moo stuff
    window.addEvent('domready',function() {
        $$('p').setStyle('border','1px solid #fc0');
    });
</script>

<p>This is a paragraph.</p>

【讨论】：