jQuery 代碼無法執行？常見原因與排查步驟

現象描述

頁面引入 jQuery 後，$('#EntTime30').val(s2) 賦值失效，控制台無報錯但功能不生效。附圖顯示頁面結構與代碼片段。

核心問題：重複引入 jQuery

最佳回答指出：第 277 行與第 283 行重複載入 jQuery。第二次載入會覆蓋第一次載入的 jQuery 物件，導致已註冊的插件、擴展方法失效，進而使後續依賴 jQuery 的代碼失效。

解決方案

1. 移除重複引用：保留第一次引入（通常在 <head>），刪除頁面底部或局部視圖中的二次引入。
2. 確保 DOM 就緒：將操作 DOM 的代碼包裹在 $(document).ready() 或 $(function(){ ... }) 中。
3. 檢查選擇器：確認 #EntTime30 元素確實存在且 ID 唯一。

修正後的代碼範例

<script src="jquery.min.js"></script> <!-- 僅引入一次 -->
<script>
$(function() {
    // DOM 就緒後執行
    var d = new Date();
    var s2 = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
    $('#EntTime30').val(s2);
});
</script>

其他常見坑點

• jQuery 版本衝突：不同插件要求不同版本，建議統一版本或使用 jQuery.noConflict()。
• 腳本載入順序：依賴 jQuery 的插件必須在 jQuery 之後載入。
• CSP 策略阻擋內聯腳本：需配置 Content-Security-Policy 或使用外部文件。

總結

重複引入 jQuery 是導致「代碼不報錯但不生效」的典型原因。養成「單一入口、統一版本、DOM 就緒後執行」的習慣，能避開 90% 的 jQuery 疑難雜症。