JSTL c:forEach 循環中按鈕 onclick 失效：原因與解決方案

現象

c:forEach 遍歷試題，每題一個按鈕綁定 onclick="addToPaper(...)"。單題分頁時正常，多題分頁時點擊無反應。

核心原因

重複 ID / 變量作用域污染。若按鈕或彈窗元素使用固定 id="btnAdd"，循環渲染後頁面存在多個相同 ID，document.getElementById 或 jQuery $('#btnAdd') 僅匹配第一個，導致後續按鈕事件綁定失效或綁錯對象。

解決方案

1. 動態綁定事件（推薦）

移除行內 onclick，統一用類名 + 事件委託：

<c:forEach items="${questions}" var="q" varStatus="s">
  <button class="btn-add" data-qid="${q.id}">加入試卷</button>
</c:forEach>

<script>
$(document).on('click', '.btn-add', function() {
    var qid = $(this).data('qid');
    addToPaper(qid);
});
</script>

2. 若必須行內 onclick，確保參數唯一

<button onclick="addToPaper(${q.id}, this)">加入</button>

並在 addToPaper 中用 this 定位當前按鈕上下文。

3. 檢查是否有重複的彈窗/表單 ID

若循環內包含 <div id="modal">，必須改為 id="modal_${q.id}" 或移出循環共用一個彈窗，JS 動態填充內容。

調試技巧

• 瀏覽器 F12 → Console 輸入 document.querySelectorAll('[id="btnAdd"]') 看長度是否 >1。
• 在 addToPaper 首行加 console.log('clicked', arguments) 確認是否觸發。

總結

c:forEach 產生重複 DOM ID 是 onclick 失效的首因。**拋棄行內事件，改用類名 + 數據屬性 + 事件委託**，徹底解決多實例綁定問題，代碼更易維護。