$(document).ready事件未运行的故障排查及解决方案

核心问题原因 #

• 未引入jQuery依赖：代码中无jQuery库引入语句，$ 属于jQuery全局变量，未引入时调用会直接抛出未定义错误，终止后续代码执行
• JS代码未包裹在<script>标签中：裸写在HTML结构中的JavaScript代码会被浏览器识别为普通文本，不会进入JS引擎执行
• 语法错误：
  • $(document).ready() 回调函数缺少闭合的右括号，末尾的 } 需修正为 }) 完成语法闭合
  • 页面中的 <h4> 标签未正确闭合，错误写法 <h4> 需改为 </h4>，否则会导致DOM结构解析异常，#stktimur 选择器可能无法匹配到对应元素
• 依赖的自定义插件未引入：代码中调用的 ambilData()、textEffect() 均为jQuery自定义扩展方法，未在jQuery之后引入对应插件文件时，调用不存在的方法会抛出错误中断执行
• 未定义变量引用：textEffect 配置项中 letterJumble: txt 的 txt 变量未提前声明赋值，运行时会抛出未定义错误

修复后完整代码示例 #

<html>
<!-- 先引入jQuery，注意放在所有jQuery插件和业务代码之前 -->
<script src="你本地的jQuery文件路径"></script>
<!-- 引入自定义扩展插件 -->
<script src="你本地的ambilData插件路径"></script>
<script src="你本地的textEffect插件路径"></script>
<body>
  <div class="panel-body text-center">
    <div class="ttl-info">
      STOK TM
    </div>
    <h4 class="show-value">
        <span id="stktimur">0</span>
    </h4> <!-- 修复闭合标签 -->
  </div>

  <script>
  // 提前定义txt变量，根据你的业务需求赋值
  const txt = '你需要的字母混淆序列';
  $(document).ready(function(){
    $('#stktimur').ambilData({
          url : '<?php echo site_url('data/datastk') ?>',
          reload: 65,
          success: function(dt, th){
              $('#stktimur').data('list', dt.data);
              if( parseInt($('#stktimur').text()) != parseInt(dt.total) ){
                  $('#stktimur').text(parseInt(dt.total) )
                    .textEffect({effect: 'jumble',jumbleColor :'#FFF', letterJumble: txt});
              }
          }
      })
  }) // 修复括号闭合
  </script>
</body>
</html>

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