Several jQuery are included in the document.

I have a document that uses old jQuery and I need a new jQuery for a specific plugin. My document structure is as follows:

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

I have googled for this question, but did not find anything that would be similar to my case (I need to load the old javascript (in the head) and THEN new (in the body) first. By the way, in Firefox it looks like the old jQuery lib is loaded and scripts that depend on it, but a script that uses the new version, and in IE and Chrome everything is exactly the opposite.

+4
source share
3 answers

To get started, you should try running all the plugins in the latest version of jQuery - you may find that you can use only one latest version.

If you cannot do this, you can work 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 will need to call

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

To use an alternative version.

+12
source

Generally stick with one jquery file included. This is a fairly large file and there is no need to import multiple versions. I would choose the latest version that can be sent from Google or Microsoft to speed up your server.

Note that if you want "doSomething" to behave differently depending on where it called on the page, you can try to link the event differently. See the following example. Like you, it calls the new version from your plugin area in the page ready event - it may 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> 
0
source

Source: https://habr.com/ru/post/1310480/


All Articles