在集成jQuery UI的现有页面添加AJAX搜索，引入jQuery后失效如何解决

问题原因 #

• 脚本引入顺序错误：jQuery核心库必须优先于所有依赖它的插件（jQuery UI、lazy加载插件、业务脚本）加载，你当前先加载了jQuery UI等插件，后引入jQuery核心库，插件初始化时找不到jQuery对象就会直接报错，导致全页脚本失效。
• 无版本冲突：你使用的jQuery 1.7.1满足jQuery UI 1.10.4的最低版本要求，代码里的live()方法在1.7.x版本中仍可正常运行，不会导致直接报错。

修复方案 #

1. 调整脚本加载顺序，按如下优先级排列：

<!-- 第一步：引入jQuery核心库 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- 第二步：引入依赖jQuery的第三方插件 -->
<script src="js/jquery-ui-1.10.4.custom.js"></script>
<script type="text/javascript" src="js/jquery.lazy.min.js"></script>
<!-- 第三步：引入自定义业务脚本 -->

2. （可选兼容优化）将代码中已废弃的live()方法替换为官方推荐的on()方法，避免后续jQuery版本升级后功能失效：

// 替换前
$("input#warenkorb_suche_feld").live("keyup", function(e) {
// 替换后
$("input#warenkorb_suche_feld").on("keyup", function(e) {

注意：如果调整顺序后仍存在异常，检查页面是否有重复引入jQuery的情况，多次引入不同版本的jQuery会覆盖之前已注册的插件，导致功能失效，全局仅保留一次jQuery核心库引入即可。

内容的提问来源于stack exchange，提问作者Mike S.