Question

我有一个使用旧jQuery的文档，我需要新的jQuery用于特定的插件。我的文档结构如下所示：

<html>
<head>
    <script type="text/javascript" src="jQuery.old.js"></script>
</head>
<body>
    <script>
        $("#elem").doSomething(); // use old jQuery
    </script>            
    <!-------- My plugin begins -------->
        <script type="text/javascript" src="jQuery.new.js"></script>
        <script type="text/javascript" src="jQuery.doSomething.js"></script>
        <script>
        $().ready(function(){
            $("#elem").doSomething();   // use new jQuery
        });
        </script>
        <div id="elem"></div>
    <!-------- My plugin ends ---------->
    <script>
        $("#elem").doSomething(); // use old jQuery
    </script>
</body>
</html>

我已经搜索了这个问题，但发现没有什么看起来像我的情况（我需要先加载旧的javascript（在头部）和那么新的（在正文中）。顺便说一句，在Firefox中看起来像旧的jQuery lib加载和依赖它的脚本是可行的，但使用新版本的脚本，以及在IE和Chrome中的一切都正好相反。

Answer 1

首先，您应该尝试在最新版本的jQuery下运行所有插件 - 您可能会发现只能使用最新版本。

如果无法执行此操作，则可以在兼容模式下运行。这是如何。

<script src="jquery-1.3.2.js"></script>
<script>
    var jqueryA = jQuery.noConflict();
</script>
<script src="jquery-1.4.2.js"></script>
<script>
    var jqueryB = jQuery.noConflict();
</script>

您需要致电

jqueryB("#myelement").....

使用备用版本。

Answer 2

您应该使用jQuery.noConflict();

请参阅此示例：http://web.enavu.com/daily-tip/using-multiple-versions-of-jquery-on-the-same-page/

Answer 3

根据经验，坚持使用一个包含的jquery文件。这是一个非常大的文件，并且不需要导入多个版本。我会选择最新版本，可以从谷歌或微软提供服务来加速你的服务器。

请注意，如果您希望“doSomething”事件的行为取决于页面中调用的位置，则可以尝试以不同方式绑定事件。请查看以下示例。与您的一样，它会在页面就绪事件的插件区域内调用新版本 - 这可能比您预期的要晚。

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
     <div id="elem"></div>

    <script>
        var oldFunct = function (e,o) { alert("old jquery" + o); };
        var newFunct = function (e,o) { alert("new jquery" + o); };
        $("#elem").bind("doSomething", oldFunct);
        $("#elem").trigger("doSomething", ["1"]);

    </script>
        <script>
        $(document).ready(function(){
            $("#elem").bind("doSomething", newFunct);
            $("#elem").trigger("doSomething", ["2"]);
            $("#elem").bind("doSomething", oldFunct);
        });
        </script>


    <script>
        $("#elem").trigger("doSomething", ["3"]);
    </script>
</body>
</html>

多个jQuery包含在文档中

3 个答案: