mootools 和 jQuery 冲突答案

【问题标题】：mootools and jQuery conflictmootools 和 jQuery 冲突
【发布时间】：2011-06-15 15:35:21
【问题描述】：

我在加载 Mootools 和 JQuery 的页面中有一个简单的表单。 JQuery 处于无冲突模式，这似乎应该不会引起任何问题。

有一个表单元素叫做“name”--

<input class="required" id="sendname" name="sendname" value="">

我正在尝试使用 Mootools 为其附加一个点击事件，以便在点击名称框时更新其他内容：

$('sendname').addEvent('click', function(e){
    // do stuff.
});

问题是 click 事件永远不会被添加。

加载时出现此错误：

Uncaught TypeError: Cannot call method 'addEvent' of null

当我尝试与 js 控制台中的元素交互时，我收到以下错误：

> $('sendname').setProperty('value', 'test');
TypeError: Object sendname has no method 'setProperty'</strike>

编辑：前一个已通过加载更新的 Mootools 修复。但是，点击事件仍然无法正常运行，尽管它不会引发错误或警告。

这段代码几乎在我用过的任何情况下都能正常工作。我认为 jQuery 冲突存在一些问题，但$ 表示法有效的事实似乎证实了 noConflict 模式是可操作的。有什么想法吗？

【问题讨论】：

另一个随机想法：在这里使用两个 JavaScript 库是否重要？我会选择 Mootools OR jQuery 并将其他脚本转换为使用相同的脚本。
@Sparky672--你说得对，我更愿意坚持使用 mootools。然而，这不是我的选择，客户在网站中同时使用这两种方法。
@julio：下一步是发布更多相关代码、发布 JSFiddle 或发布页面链接。
@julio：另外，删除所有 jQuery 代码（暂时）只是为了验证您的 Mootools 代码是否按预期工作。
@Sparky672--这是给你的小提琴--jsfiddle.net/uSwzL/1。看起来我的页面中发生的事情是在 mootools 代码之后加载了 jQuery——所以 noConflict() 语句没有被兑现。

标签： javascript jquery mootools

【解决方案1】：

您错误地定位了元素...我认为这与可能的冲突无关。

在这种情况下，您需要为 id 添加 hash 或为类添加句点，如下所示：

$('#sendname').addEvent('click', function(e){
    // do stuff.
});

注意#sendname中的#

【讨论】：

@jackJoe-- 我不是在质疑你的回答，但是当我尝试使用该 # 表示法时，我得到了： $('#sendname').addEvent('click', function(e) {警报（'yo'）}）； TypeError: $("#sendname") is null 但是，使用原始格式不会引发错误（尽管它似乎仍然没有添加点击事件）-- $('sendname').addEvent('click', function (e){ 警报('yo')});
@julio：毫无疑问。按 ID 选择时，必须在名称前加上哈希：$('#myID_name')
@Sparky672--您使用的是 jQuery 表示法，还是我完全误解了 mootools 的语法？来自：mootools.net/docs/core125/core/Element/Element 示例：通过 ID 获取 DOM 元素：var myElement = $('myElement');
@julio：这是正确的 jQuery 语法。也许你应该澄清你的问题。
@Sparky-- 澄清了问题。很抱歉造成混乱。

【解决方案2】：

MooTools 具有美元安全模式，只要 MooTools 最后加载，自动将 $ 释放到其他库。

如果美元安全模式处于活动状态，您需要使用：

document.id('SomeElementID').someMethod()

您给出的示例中发生的情况是，您使用 jQuery 来选择元素，并在结果上使用 MooTools 方法。问题是，jQuery 返回的 jQuery 对象上没有这样的“addEvent”方法。 MooTools 对实际元素起作用，因此您需要先使用 MooTools 查询方法选择它们：$ == document.id 或 $$ == document.search

如果需要，您可以将 document.id 缓存到 var 以方便使用：

var $M = document.id;
$M('sendname').addEvent(...)

【讨论】：

【解决方案3】：

正如 OP 的 cmets 中所述，问题在于 jQuery/Mootools 脚本的加载顺序。 jQuery noConflict 加载得太晚，并导致问题。请看 jsfiddle -- http://jsfiddle.net/uSwzL/1/

【讨论】：

【解决方案4】：

在加载其他基于 $ 的库之后加载 jquery.js 也没有任何问题：

<script>$=function(){alert('hell');}</script>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script>
$.noConflict();
$();
alert(jQuery.trim('  hello '));
</script>

即使在php框架html模板中：

<script>
function on_doc_ready()
         {jQuery(function($)
                 {$( "#sortable" ).sortable();
                  $( "#sortable" ).disableSelection();
                 }
                );
         }
function load_jquery_ui()
         {var s2=document.createElement('scr'+'ipt');
          s2.setAttribute('onload', 'on_doc_ready();');
          s2.src='/app/idm/statics/jQuery/js/jquery-ui-1.10.0.custom.min.js';
          document.getElementsByTagName('head')[0].appendChild(s2);
         }
function load_jquery_after_mootools()
         {var s1=document.createElement('scr'+'ipt');
          s1.src='/app/idm/statics/jQuery/js/jquery-1.9.0.js';
          s1.setAttribute('onload', '$.noConflict();load_jquery_ui();');
          document.getElementsByTagName('head')[0].appendChild(s1);
         }
load_jquery_after_mootools();
<script>

【讨论】：