Question

我在一个加载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修复了之前的问题。但是，click事件仍然无法正常运行，但它不会引发错误或警告。

这个代码在我用过它的几乎任何情况下都能正常工作。我假设jQuery存在一些冲突的问题，但$符号的工作原理似乎证实了noConflict模式是可操作的。有什么想法吗？

Answer 1

你错误地瞄准了这个元素......我认为这与可能的冲突无关。

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

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

请注意#sendname

中的＃

Answer 2

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

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

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

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

如果您愿意，可以将document.id缓存到var以方便：

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

Answer 3

如对OP的评论中所述，问题是jQuery / Mootools脚本的加载顺序。 jQuery noConflict加载太晚，导致问题。请参阅jsfiddle - http://jsfiddle.net/uSwzL/1/

Answer 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>

mootools和jQuery冲突

4 个答案: