JQuery No Conflict - Onclick Functions - Несколько фреймворков

Question

У меня есть несколько JS Frameworks и некоторые onClick="changeText()" с содержимым, просто изменяющим текст элементов. В моем сценарии у меня есть

jQuery(document).ready(function($){ 
    function changeText(){ 
     $('#test').text('Hello World!'); 
    } 
}); 

Я считаю, что функция Jquery.ready бросает все это. В моем отладчике он говорит мне, что он не может найти мою функцию changeText(), на которую скрипт загружается на 100% (я могу просмотреть через view: source -> js link). Также, если это имеет значение, я запускаю Joomla 1.5 с загрузкой Mootools в качестве моей другой структуры.

Я также знаю, что функции на 100% правы, потому что я могу нормально запускать их на стандартной странице html без функции Jquery.ready.

Есть ли способ указать, какой файл можно назвать этим или «взломанным» способом?

Answer 1

От the documentation,

var $j = jQuery.noConflict(); 

сразу после того, как ваш JQuery скрипт тег изменит переменную JQuery в $ J

Answer 2

вы можете обернуть jQuery в функции. Кстати, $ - это просто псевдоним для jQuery, который является фактическим пространством имен jQuery. в общем, это выглядит следующим образом:

(function($){ 
    $(function(){ 

     //do regular jQuery as needed 

     function changeText(){    //your function 
      $('#test').text('Hello World!'); 
     } 

     $('element').on('click',function(){ //onclick handler 
      changeText(); 
     }); 

    }); 
}(jQuery)); 

---

, как прокомментировал @ThiefMaster, вы уже использовали jQuery и при условии $ так что вы можете отказаться от моей обертки.

и для добавления встроенных событий, таких как <button onclick="doSomething()">, запускают события, которые находятся в глобальном пространстве имен. как только вы завернете функцию в jQuery, она больше не является частью глобального пространства имен. лучше присоединить обработчики событий, используя JS, изнутри завернутого кода.

Answer 3

Лучшая опция не использует встроенные события вообще - вместо этого используйте $('selector').on('click', function() { ... }).

Если вы не можете это сделать по какой-либо причине, вы все равно можете использовать встроенные события. Однако, поскольку вы определяете свои функции внутри другой функции, вам необходимо сделать их глобальными. Это можно сделать, добавив их в window объект, который является глобальным объектом в среде браузера:

window.changeText = function() { 
    // ... 
};