Solve the jquery conflict by taking the ecmall system as an example.

Solve the jquery conflict by taking the ecmall system as an example.

When debugging a diy project today, I found that the diy editing box does not appear. This diy is from the ecmall system. If this is not the case, I am surprised to find out the cause. Search for ideas.

1. Check whether the diy template has any problems. Check the template carefully and check whether the code is correct.

2. Compare the previous backup code. [I have a habit of backing up the code every time a function is developed]. The comparison has not changed.

3. The problem is concentrated on the newly added jquery carousel plug-in. Diy is also written in jquery. To test, I deleted the jquery plug-in I just wrote and then logged on to the background to edit the template. This is fine, so I decided it was jquery's old problem and conflict.

 

As a result, we collected and sorted out some methods to solve jquery conflicts. Strive for the most comprehensive.

 

First, problems with jquery and other js conflicts, such as jquery and prototype.

Problem description: when multiple js libraries are introduced and the $ symbol is defined in another js library, a conflict occurs when the $ symbol is used.

First case: jquery. js is introduced after prototype. js, for example:

 

 < script src =  prototype.js  type =  text/javascript  />  < script src =  jquery.js  type =  text/javascript  /> 　　

In this case, we write the following in our own js Code: $ ('# msg '). hide (); $ always represents the $ symbol defined in jquery, and can also be written as JQuery ('# msg '). hide (); if you want to use prototype. $ defined in js. We will introduce it later.

 

Case 2: jquery. js is introduced before prototype. js, for example:

 

< script src =  jquery.js  type =  text/javascript  />  < script src =  prototype.js  type =  text/javascript  /> 

In this case, we write the following in our own js Code: $ ('# msg '). hide (); $ prototype. $ symbol defined in js. If we want to call jquery. if the factory in js selects the function, it can only be written in the full name JQuery ('# msg '). hide ().

 

The following describes how to correctly use the $ symbol defined in different js libraries when the file sequence of the first js library is introduced.

I. use JQuery. noConflict () the function of this method is to let JQuery give up ownership of $ and return the control of $ to prototype. js, because jquery. js is introduced later, so JQuery is the final control of $. The returned value is JQuery. After the method is called in the code, we cannot use $ to call the JQuery method. $ represents the $ defined in the prototype. js library. As follows:

 

JQuery. noConflict (); JQuery ('# msg '). hide (); // You cannot write $ ('# msg') here '). hide (). $ represents prototype. $ symbol defined in js.

Since then, $ represents the $ defined in prototype. js. $ in jquery. js cannot be used any more. You can only use the full name of $ in jquery. js.

Ii. Customize the alias of JQuery

 

If the JQuery. noConflict () method is used in the first method, you can only use the full name of JQuery. We can also redefine the alias for JQuery. As follows:

 

Var $ j = JQuery. noConflict (); $ j ('# msg'). hide (); // $ j Represents JQuery.

Since then, $ represents the $ defined in prototype. js. $ in jquey. js cannot be used any more. You can only use $ j as the JQuery alias in jquey. js.

 

 

3. Use the statement block. The $ defined in jquery. js is still used in the statement block, as shown below:

JQuery. noConflict (); JQuery (document ). ready (function ($) {$ ('# msg '). hide (); // $ used in the method of the entire ready event is jquery. $.} defined in js .});

Or use the following statement block: (function ($) {$ ('# msg '). hide (); // jquery is used in this statement block. $.} defined in js .}) (JQuery)

If $ in jquery. js is used when the file sequence of the js library is introduced in the second method, we can still use the statement block method described above, for example:

<Script src = jquery. js type = text/javascript/> <script src = prototype. js type = text/javascript/> <script type = text/javascript> (function ($) {$ ('# msg '). hide (); // jquery is used in this statement block. $.} defined in js .}) (JQuery) </script>

This method of using statement blocks is very useful. We should use this method when writing jquery plug-ins by ourselves, because we do not know how to introduce various js libraries in sequence during our work, however, the syntax of such statement blocks can avoid conflicts.

Second: solutions to conflicts between jquery versions

 

Case: solve the conflict between jQuery1.3.2 and 1.4.2. (This example has passed the test !)

Step 1: Add the following sentence at the end of the source code 1.4.2:

1	var $j4 = jQuery.noConflict(true);

The reason why I add the source code here is not to add it when I use it as mentioned in most articles. This is because many 1.4.2-based plug-ins need to be added, adding too many plug-ins can avoid repeated code. In this statement, the reference permissions of jQuery and $ of 1.4.2 are all waived. That is, plug-ins Based on 1.4.2 cannot use jQuery and $. At the same time, a new namespace for $ j4 is given. Note that it is the property of window. Looking at the source code of 1.4.2, we can see that it actually runs the following two sentences:

1 2	window.$=_$; window.jQuery=_jQuery;

The same reason is that window. $ = _ temp $ (return namespace) is named differently.

Step 2: Add the following code to the header of all plug-ins Based on the 1.4.2 framework:

1	var _temp$ = window.$,_tempjQuery = window.jQuery;

Place $ and jQuery of jQuery1.3.2 in the temporary variable space:

1	window.$ = $j4;

This sentence and the following sentence are used to correctly use jQuery and $ for the intermediate code. The following $ j4 gives them correct references.

1	window.jQuery = $j4;

There are three reasons for doing so:

①. We do not want to change the source code of a large number of jQuery plug-ins. It is best not to change the source code. If you do not change the source code, try to change it as little as possible. Adding Code changes at the end of the header makes the original code in the middle a good way.

②. Because 1.4.2 has abandoned the control of jQuery and $, but the existing plug-in code uses them for reference again, because the plug-in cannot predict conflicts, even if there is a conflict, the plug-in developed by others must be referenced by $ or jQuery unless it is not a plug-in under jQuery.

③. In order to prevent the plug-in from directly referencing with window. $ and window. jQuery, The jQuery and $ of 1.3.2 are referenced. Although this situation is rare, it should be avoided.

The original code in the middle does not move, and the code is added at the end:

1 2	window.$ = _temp$;// Return the $ reference permission to jQuery1.3. window.jQuery = _tempjQuery;// Return jQuery's reference permission to jQuery1.3.

Step 3: Use the jQuery1.4.2-based selection function to use only $ j4 (element.

Conclusion: To date, jQuery1.4.2 has completely waived the control permissions of $ and jQuery. 1.3.2 give up $'s control permission, but do not give up jQuery's permission. In fact, jQuery can also give up, just give an alias $ j3. It is recommended that prototype be placed after jQuery1.3.2, which grants $ control permissions. You must use $ j4 to reference jQuery1.4.2 later. However, even if there are more jQuery Framework Version conflicts, they are all solved. Let's take a look at how to use jQuery 1.2. Refer to the execution steps in (2), but the first step is changed:

1	var $j2 = jQuery.noConflict(true);

Step 3: use $ j2 (element. The truth is the same.