Bootstrap 表單重複提交原因：jQuery load 重複載入導致多重事件綁定

現象

AJAX 新增功能，每次提交資料庫寫入多筆相同資料（除 ID 外），前端斷點顯示方法僅進入一次。

根本原因

列表頁多次呼叫 $('#container').load('detail.html') 載入詳情頁片段，每次載入都會：

1. 插入包含 <form> 的 HTML。
2. 執行詳情頁內的 <script> 綁定提交事件。
3. 導致同一表單綁定多個 submit 事件處理器，提交時全部觸發。

解決方案

1. 載入前銷毀舊事件：

   
   $('#container').off('submit', 'form').load('detail.html', function() {
       // 重新綁定
       $('form').on('submit', handleSubmit);
   });
   

2. 詳情頁移除內聯 script，改由列表頁統一綁定（推薦）。
3. 使用 `one()` 單次綁定：

   
   $('form').one('submit', handleSubmit); // 僅觸發一次
   

4. 提交按鈕 disabled 防重**

function handleSubmit(e) {
    e.preventDefault();
    var $btn = $(this).find(':submit').prop('disabled', true);
    $.post(...).always(() => $btn.prop('disabled', false));
}