Question

我在我的网站上使用了2个JQuery版本，但是同时加载这两个版本存在问题。如果一个运行，那么另一个不能运行。我正在使用日期时间选择器和高级图表。我已经搜索过代码来处理JQuery冲突，但我不明白它们。我是JQuery的新手。

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>

这些用于日期时间选择器。

<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"> </script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>

这些用于高级图表。请告诉我一个简单的方法，我可以同时加载两个。

Answer 1

据我所知，您不需要两次加载JQuery库。

//load JQuery Library
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
//load Jquery UI Library
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
//load the code for highcharts
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
//load the css for JQuery UI
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all">

Answer 2

我认为这是不明智的。

如果您的依赖项不使用更高版本的jquery，则该依赖项会将您限制为该特定的jquery版本。

我的建议是你一次只能加载一个jquery实例。您可以尝试noConflict（），但这可能会导致任何可能无法完美实现此功能的依赖库出现问题。

Answer 3

嗯，这未经过测试，但您可以使用noConflict并将它们设置为不同的短名称

类似

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript"> $jq1=jQuery.noConflict (); </script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript"> $jq2=jQuery.noConflict (); </script>

然后使用第一个作为$ jq1（'whaeverselector'）......

Answer 4

是的，由于jQuery的noconflict模式，这是可行的。

http://blog.nemikor.com/2009/10/03/using-multiple-versions-of-jquery/

<!-- load jQuery 1.1.3 -->
<script type="text/javascript" src="http://example.com/jquery-1.1.3.js"></script>
<script type="text/javascript">
var jQuery_1_1_3 = $.noConflict(true);
</script>

<!-- load jQuery 1.3.2 -->
<script type="text/javascript" src="http://example.com/jquery-1.3.2.js"></script>
<script type="text/javascript">
var jQuery_1_3_2 = $.noConflict(true);
</script>

然后，而不是

  $('#selector').function();

你会做的

 jQuery_1_3_2('#selector').function();

或

jQuery_1_1_3('#selector').function();.

加载2个不同版本的JQuery时出错

4 个答案: