mootools和jQuery冲突

| 我在加载Mootools和JQuery的页面中有一个简单的表单。 JQuery处于无冲突模式，看来它应该不会引起任何问题。有一个名为\“ name \”的表单元素-

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

我正在尝试使用Mootools将click事件附加到该事件，以在单击名称框时更新其他内容：

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

问题是单击事件从未添加。加载时出现此错误：

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模式是可操作的。有任何想法吗？

已邀请:

4 个回复

戒黑恳农

您错误地定位了元素...我认为这与可能的冲突无关。在这种情况下，您需要为ID或类的句点添加哈希，如下所示：

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

注意ѭ6中的＃

导力疵谜

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(...)

漂汀拦

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

膝垫富顷

甚至在加载其他基于$的库之后加载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 个回复

发起人

javascript

jquery

mootools

问题状态

mootools和jQuery冲突

与内容相关的链接

4 个回复

发起人

javascript

jquery

mootools

问题状态