Multiple jQuery includes in a document_问答_开发者

开发者 https://www.devze.com 2022-12-30 22:40 出处：网络

I have a document which uses old jQuery and I need new jQuery for a particular plug-in. My document structure looks like this:

<html>
<head>
    <script type="text/javascript" src="jQuery.old.js">开发者_C百科;</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>

I have googled for this question but found nothing that would look like my case (I need first to load old javascript (in the head) and THEN new (in the body). By the way, in the Firefox looks like old jQuery lib loads and scripts that depends on it works, but script that uses new version, and in IE and Chrome everything is exactly opposite.

To start, you should try running all the plugins under the latest version of jQuery - you may find you can use just the one latest version.

If you cannot do this, you can run in compatibility mode. Here is how.

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

You would need to call

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

To use the alternate version.

You should use jQuery.noConflict();

See this example: http://web.enavu.com/daily-tip/using-multiple-versions-of-jquery-on-the-same-page/

As a rule of thumb, stick to one included jquery file. It's quite a large file, and there's no need to import multiple versions. I would opt for the latest version, which can be served from google or microsoft to speed up your server.

Note if you want the "doSomething" event to behave differently depending on where it's called in the page, you could try to bind the event differently. Check out the following example. As with yours, it calls the new version from within your plugin area on the page ready event - this might be later than you expected.

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