HTML 頁面複製後按鈕失效：缺失 JS/CSS 資源或事件綁定上下文錯誤

典型癥狀

• 頁面結構完整，但按鈕點擊無反應。
• 控制台報錯：Uncaught ReferenceError: $ is not defined / functionName is not defined。
• 頁面中出現異常內聯腳本片段：if (53 != 0) { $('#lowerdevice').html(...) }。

根因排查清單

1. 資源路徑斷裂：複製 HTML 時，相對路徑 js/app.js、css/style.css 指向錯誤位置。
   → 用瀏覽器 Network 面板查看 404 資源，修正為絕對路徑或 CDN 鏈接。
2. 內聯腳本依賴外部庫：頁面中 <script>$('#btn').click(...) 先於 <script src="jquery.js"> 執行。
   → 調整腳本加載順序，或使用 defer/DOMContentLoaded。
3. 事件綁定上下文丟失：原頁面用事件委託 $(document).on('click', '.btn', ...)，複製後文檔結構變化導致選擇器失效。
   → 檢查選擇器是否匹配新 DOM 樹。
4. 服務端渲染殘留：複製的是已渲染頁面，包含模板引擎殘留標記（如 {% if %}、<%= %>），瀏覽器當作文本顯示。
   → 僅複製純靜態 HTML，或重新渲染模板。

快速定位三步法

1. 打開 F12 Console，紅色報錯優先處理。
2. Network 面板勾選「Disable cache」，刷新頁面，紅色 404 即為缺失資源。
3. Sources 面板斷點調試按鈕點擊處理器，觀察執行流。

預防清單

• 使用構建工具打包資源，生成帶 Hash 的文件名，避免路徑錯誤。
• 模板中使用 base 標簽或模板變量輸出資源前綴。
• 複製頁面時，同步複製整個靜態資源目錄結構。