[英]How do I run different versions of jQuery on the same page?
My company has purchased a product that renders an ASP.NET control on the page. 我的公司购买了一个在页面上呈现ASP.NET控件的产品。 This control uses jQuery 1.2.3 and adds a script tag to the page to reference it. 此控件使用jQuery 1.2.3并向页面添加脚本标记以引用它。 The developers of the control will not support use of the control if it modified in any way (including modification to reference a different version of jQuery). 如果以任何方式修改控件(包括修改引用不同版本的jQuery),控件的开发人员将不支持使用该控件。
I'm about to start development of my own control and would like to use the features and speed improvements of jQuery 1.3. 我即将开始开发自己的控件,并希望使用jQuery 1.3的功能和速度改进。 Both of these controls will need to exist on the same page. 这两个控件都需要存在于同一页面上。
How can I allow the purchased control to use jQuery 1.2.3 and new custom development to use jQuery 1.3? 如何让购买的控件使用jQuery 1.2.3和新的自定义开发来使用jQuery 1.3? Also out of curiosity, what if we were to use an additional control that needed to reference yet another version of jQuery? 出于好奇,如果我们要使用另一个需要引用另一个版本的jQuery的控件呢?
You can achieve this by running your version of jQuery in no-conflict mode . 您可以通过在无冲突模式下运行您的jQuery版本来实现此目的。 "No conflict" mode is the typical solution to get jQuery working on a page with other frameworks like prototype , and can be also be used here as it essentially namespaces each version of jQuery which you load. “没有冲突”模式是让jQuery在其他框架(如原型)上运行的典型解决方案,也可以在这里使用,因为它本质上是你加载的每个jQuery版本的命名空间。
<script src="jQuery1.3.js"></script>
<script>
jq13 = jQuery.noConflict(true);
</script>
<!-- original author's jquery version -->
<script src="jQuery1.2.3.js"></script>
This change will mean that any of the jQuery stuff you want to use will need to be called using jq13
rather than $
, eg 这个改变意味着你想要使用的任何jQuery东西需要使用jq13
而不是$
来调用,例如
jq13("#id").hide();
It's not an ideal situation to have the two versions running on the same page, but if you've no alternative, then the above method should allow you to use two differing versions at once. 让两个版本在同一页面上运行并不理想,但如果你别无选择,那么上面的方法应该允许你一次使用两个不同的版本。
Also out of curiosity, what if we were to use an additional control that needed to reference yet another version of jQuery? 出于好奇,如果我们要使用另一个需要引用另一个版本的jQuery的控件呢?
If you needed to add another version of jQuery, you could expand on the above: 如果你需要添加另一个版本的jQuery,你可以扩展上面的内容:
<script src="jQuery1.3.js"></script>
<script>
jq13 = jQuery.noConflict(true);
</script>
<script src="jQuery1.3.1.js"></script>
<script>
jq131 = jQuery.noConflict(true);
</script>
<!-- original author's jquery version -->
<script src="jQuery1.2.3.js"></script>
The variables jq13
and jq131
would each be used for the version-specific features you require. 变量jq13
和jq131
将分别用于您需要的版本特定功能。
It's important that the jQuery used by the original developer is loaded last - the original developer likely wrote their code under the assumption that $()
would be using their jQuery version. 重要的是原始开发人员使用的jQuery最后加载 - 原始开发人员可能在假设$()
将使用他们的jQuery版本的情况下编写代码。 If you load another version after theirs, the $
will be "grabbed" by the last version you load, which would mean the original developer's code running on the latest library version, rendering the noConflicts
somewhat redundant! 如果您在他们之后加载另一个版本, $
将被您加载的最后一个版本“抓取”,这意味着原始开发人员的代码在最新的库版本上运行,使得noConflicts
有点多余!
As said ConroyP you can do this with jQuery.noConflict
but don't forget var
when declaring variable. 正如所说的jQuery.noConflict
您可以使用jQuery.noConflict
执行此操作,但在声明变量时不要忘记var
。 Like this. 像这样。
<script src="jQuery1.3.js"></script>
<script>
var jq13 = jQuery.noConflict(true);
</script>
<!-- original author's jquery version -->
<script src="jQuery1.2.3.js"></script>
You can connect all $'s to jq13 by adding (jq13) after function's })
. 您可以通过在函数})
之后添加(jq13)将所有$连接到jq13。 like this 像这样
(function($) {
...
})(jq13);
It seems like the order doesn't matter... for example: http://gist.github.com/136686 . 似乎订单无关紧要......例如: http : //gist.github.com/136686 。 The console output is at the top and all the versions seem to be in the right places. 控制台输出位于顶部,所有版本似乎都在正确的位置。
工作是假的
var jq16 = $.noConflict(false);
In the second version declare a variable as $.noConflict(true). 在第二个版本中,将变量声明为$ .noConflict(true)。 And use the declared variable in place of $ used in the jquery code. 并使用声明的变量代替jquery代码中使用的$。 Please check the below code : This code is used after the declaration of second versions of jquery: 请检查以下代码:此代码在声明第二版jquery之后使用:
<script type="text/javascript">
var jQuery_1_9_1 = $.noConflict(true); function pageLoad(sender, args) {
var $ddl = jQuery_1_9_1("select[name$=drpClassCode]");
var $ddl1 = jQuery_1_9_1("select[name$=drpSubContractors]");
$ddl.select2();
$ddl1.select2();
$ddl.bind("change keyup", function () {
$ddl.fadeIn("slow");
});
$ddl.bind("change keyup", function () {
$ddl1.fadeIn("slow");
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.