Question

我有以下情况：

<html>
<head>
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
   <script type="text/javascript" src="decorator.js"></script>
</head>
<body></body>
</html>

decorator.js为页面添加了一个顶级菜单，该菜单依赖于jQuery 1.4.4。我的程序的其余部分使用jQuery 1.11.0。 decorator.js是由其他人实现的，所以我无法控制它。我已经简化了decorator.js中的代码来说明我的问题：

(function($) {
   $(document).ready(function() {
   $('head').prepend('<script type="text/javascript"
      src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>');
   });
})(jQuery);

问题：在decorator.js添加菜单后，如何调用“$ .noConflict（）”将jQuery对象重置为1.11.0。由于在创建DOM对象之后在decorator.js中添加了jQuery 1.4.4，因此$ jQuery对象始终设置为1.4.4。

我尝试在标题中的decorator.js之后调用noConflict（），但无济于事。我的猜测是因为那时还没有添加jQuery。

希望有人能提出解决方案。谢谢！

Answer 1

您可以使用脚本元素的加载回调，如

(function ($) {
    console.log(jQuery.fn.jquery)
    var script = document.createElement('script');
    script.src = '//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js';
    script.onload = function () {
        console.log('onload of 1.4.4')
        console.log('jQuery', jQuery.fn.jquery);
        $jq144 = jQuery.noConflict(true);
        console.log('jQuery', jQuery.fn.jquery);
        console.log('$jq144', $jq144.fn.jquery);
    }
    document.head.appendChild(script)
})(jQuery);

演示：Fiddle

如何动态添加jQuery库时使用noConflict（）？

1 个答案: