延迟内联jQuery Ready/Bind函数：解决jQuery未定义报错问题

这里有个可靠的方案来处理这类延迟执行的问题，完全适配你提到的思路，具体步骤如下：

第一步：在所有内联jQuery代码前添加临时拦截函数 #

在页面最顶部（比如<head>的起始位置）插入这段代码，用来捕获所有提前调用的jQuery/$操作，把它们存入延迟执行队列：

// 创建队列存储待延迟执行的内联脚本回调
var deferInlineScripts = [];

// 临时替换全局的$和jQuery变量，拦截调用并加入队列
window.$ = window.jQuery = function(inlineFunction) {
  deferInlineScripts.push(inlineFunction);
};

这样不管内联代码用$(function(){...})还是jQuery(function(){...})，都会被这个临时函数接住，不会直接抛出"未定义"的错误。

第二步：在jQuery加载完成后执行延迟队列代码 #

等页面底部的jQuery库加载完成后，立即添加这段代码，用真实的jQuery来执行队列里的所有回调：

// 遍历延迟队列，逐个执行回调
deferInlineScripts.forEach(function(callback) {
  jQuery(callback);
});

// 可选：清空队列，防止后续重复执行
deferInlineScripts = [];

完整代码示例 #

假设你的遗留内联代码是：

jQuery(document).bind('click', function(){ console.log('click'); });

整合后的页面代码结构如下：

<head>
  <script>
    var deferInlineScripts = [];
    window.$ = window.jQuery = function(inlineFunction) {
      deferInlineScripts.push(inlineFunction);
    };
  </script>
  
  <!-- 你的遗留内联jQuery代码 -->
  <script>
    jQuery(document).bind('click', function(){ console.log('click'); });
  </script>
</head>
<body>
  <!-- 页面内容 -->
  
  <!-- 底部加载jQuery库 -->
  <script src="path/to/jquery.min.js"></script>
  <script>
    deferInlineScripts.forEach(function(callback) {
      jQuery(callback);
    });
    deferInlineScripts = [];
  </script>
</body>

额外补充说明 #

• 如果你的遗留代码里除了DOM ready回调，还有直接调用jQuery方法的情况（比如jQuery('.box').hide()），基础方案需要微调：可以扩展临时函数，判断传入参数类型，若为选择器则返回一个带空方法的对象避免报错，同时记录操作逻辑，等jQuery加载后再执行。不过大部分遗留内联代码都是基于DOM ready的，基础方案足以覆盖。
• 这个方案的核心是先拦截存储，后批量执行，完美解决了库加载顺序导致的变量未定义问题。

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