MooTools и JQuery конфликт

Question

У меня есть простая форма на странице, которая загружает Mootools и JQuery.JQuery не находится в режиме конфликта, что, похоже, не должно вызывать проблем.

Есть элемент формы с именем "name" -

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

И я пытаюсь прикрепить к нему событие click, используя 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 имеет режим Dollar Safe, который автоматически высвобождает $ в другие библиотеки, пока MooTools загружается последним.

Если активен режим Dollar Safe, вам необходимо использовать:

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

Answer 3

Без проблем, даже загружая 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 framework html template:

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

Answer 4

Как описано в комментариях к OP, проблема заключалась в порядке загрузки скриптов jQuery / Mootools.JQuery noConflict загружался слишком поздно и вызывал проблемы.Пожалуйста, смотрите jsfiddle - http://jsfiddle.net/uSwzL/1/