Bootstrap 二級選單失效排查：自訂 JS 覆蓋導航容器導致衝突

現象描述

引入 common.js 後 Bootstrap 二級選單無法展開；移除該檔案則恢復正常。

common.js 關鍵程式碼

$(function () {
    $(".m-header").load("/headPage.htm");
    $(".m-footer").load("/footPage.htm");
});

根本原因

.m-header 容器原本包含導航選單結構。.load() 以 AJAX 載入 headPage.htm 並替換容器內全部 HTML，導致原始選單 DOM 被移除，事件綁定失效。

解決方案

1. 調整 HTML 結構：將導航選單移出 .m-header，或在 headPage.htm 中保留完整選單結構並重新初始化 Bootstrap 元件。
2. 載入後重新初始化：

   $(".m-header").load("/headPage.htm", function() {
       // 重新啟用下拉選單
       $('[data-bs-toggle="dropdown"]').dropdown();
       // 或 Bootstrap 4/5
       var dropdowns = document.querySelectorAll('.dropdown-toggle');
       dropdowns.forEach(el => new bootstrap.Dropdown(el));
   });
   

3. 使用 iframe 或局部更新：若頭部較複雜，考慮 <iframe> 隔離，或以 API 取得資料後客戶端渲染。

最佳實踐

• 避免在共用版面區塊以 .load() 整體替換含有互動元件的區域。
• 採用元件化框架（Vue/React/Angular）管理共用版面，狀態與生命週期更可控。