jQuery库冲突致搜索自动补全框加载异常问题求助

你页面里同时引入了两个不同版本的jQuery（1.4.2和1.11.1），第二次加载的1.11.1会覆盖掉第一次的1.4.2环境。页面初始化时，搜索补全逻辑基于先加载的1.4.2绑定，但后续操作触发后，jQuery环境已经被替换，导致之前绑定的事件、插件实例失效，就出现了补全框加载异常的情况。

当前引入代码：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="../assets/js/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" href="../assets/css/jquery-ui-datepicker1.css" />
<script src="../assets/js/jquery-ui-datepicker1.js"></script>

方案一：移除重复引用（优先推荐） #

直接删掉旧版本的jQuery，保留1.11.1，并且确保jQuery在jQuery UI之前引入，修改后的代码如下：

<script src="../assets/js/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" href="../assets/css/jquery-ui-datepicker1.css" />
<script src="../assets/js/jquery-ui-datepicker1.js"></script>

这样整个页面只用同一个jQuery版本，彻底避免冲突问题。

方案二：保留双版本（仅当老旧功能必须依赖1.4.2时使用） #

用noConflict()隔离两个版本的jQuery，避免变量覆盖：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!-- 将1.4.2版本的jQuery映射为$jq14，释放$和jQuery变量 -->
<script>var $jq14 = jQuery.noConflict(true);</script>
<script src="../assets/js/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" href="../assets/css/jquery-ui-datepicker1.css" />
<script src="../assets/js/jquery-ui-datepicker1.js"></script>

之后：

• 搜索补全、jQuery UI这类新功能，正常用$或jQuery（对应1.11.1版本）
• 依赖1.4.2的老旧功能，用$jq14代替$调用API

验证步骤 #

修改后务必测试两个场景：

• 页面首次加载时，搜索补全是否正常工作
• 操作页面其他功能后，再次输入搜索框，确认数据能正常加载

内容的提问来源于stack exchange，提问作者akash mojar