Jquery No Conflict - Onclick函数 - 多个框架

Question

我有多个JS框架正在运行，一些onClick="changeText()" ，内容只是更改元素文本。 在我的剧本中我有

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

我相信Jquery.ready函数正在全力以赴。 在我的调试器中，它告诉我它无法找到我的changeText()函数，该脚本是100％加载的（我可以通过视图查看：source - > js link）。 此外，如果它有所作为我正在运行Joomla 1.5与Mootools作为我的其他框架加载。

我也知道这些函数是100％正确的，因为我可以在没有Jquery.ready函数的标准html页面中正常运行它们。

有没有办法指定从哪个文件调用它或'hacky'方式？

Answer 1

你可以在一个函数中包装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 2

从文档中 ，

var $j = jQuery.noConflict();

在您的jquery脚本标记将jQuery变量更改为$ j之后立即执行

Answer 3

最好的选择是根本不使用内联事件 - 使用$('selector').on('click', function() { ... })代替。

如果由于某种原因无法做到这一点，您仍然可以使用内联事件。 但是，由于您在另一个函数中定义了函数，因此需要将它们设置为全局函数。 您可以通过将它们添加到window对象来实现，该window对象是浏览器环境中的全局对象 ：

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