Bootstrap 二級菜單失效：自定義 JS load() 覆蓋導航容器，導致菜單 DOM 被替換

現象

引入 `common.js` 後，Bootstrap 二級菜單不彈出；註釋掉則正常。

// common.js
$(function() {
    $(".m-header").load("/headPage.htm"); // 問題行
    $(".m-footer").load("/footPage.htm");
});

原因

導航菜單 HTML 結構位於 `.m-header` 容器內。`load()` 完成後，**用服務端返回的 HTML 完全替換**了 `.m-header` 內部 DOM，**原有菜單 DOM 被銷毀**，綁定的 Bootstrap 事件處理器失效。

解決方案

1. 調整容器結構：將菜單移出 `.m-header`，或 `.m-header` 僅包裹需動態加載的部分（如用戶信息），菜單放在靜態父容器中。
2. load() 回調重新初始化**（治標）：

$(".m-header").load("/headPage.htm", function() {
    // 重新初始化 Bootstrap 下拉菜單
    $('[data-toggle="dropdown"]').dropdown();
});

3. 改用 AJAX 獲取片段，手動插入**，保留原有菜單 DOM。

最佳實踐

• **避免動態替換已綁定事件的祖先容器**。
• 佈局規劃時，將「靜態交互組件（菜單、Tab）」與「動態內容區」分離。