JavaWeb 開發：解決超鏈接 onclick 雙重綁定導致確認框需點擊兩次的問題

在 JSP 頁面中，若超鏈接同時設置 href="javascript:del_sure()" 和 onclick 事件，且處理函數內又動態綁定 click 事件，會導致「首次點擊無反應，第二次才彈出確認框」的現象。

問題代碼分析

<a href="javascript:del_sure()" class="delete" id="..." onclick="...">刪除</a>

function del_sure() {
    // 函數內又綁定了 click 事件
    $(".delete").click(function() { ... }); 
    flag = confirm("您確定要刪除嗎？");
    // ...
}

根本原因

1. href="javascript:del_sure()" 會在點擊時執行一次 del_sure()。
2. 函數內的 $(".delete").click(...) 又為所有 .delete 元素綁定了 新的 click 事件處理器。
3. 首次點擊：執行 href 中的函數 → 綁定新事件 → 結束（未觸發新綁定的事件）。
4. 第二次點擊：觸發新綁定的 click 事件 → 彈出確認框。

解決方案

方案一：移除 href 中的調用，僅用 onclick 傳遞 this

<a href="javascript:void(0)" onclick="del_sure(this)" class="delete" id="${param.pageNo},${item.book.id}">刪除</a>

function del_sure(element) {
    var flag = confirm("您確定要刪除嗎？");
    if (flag) {
        var strArr = $(element).attr("id");
        var str = strArr.split(",");
        var href = "bookServlet?method=remove&pageNo=" + str[0] + "&id=" + str[1];
        window.location.href = href;
    }
}

方案二：使用事件委託（推薦用於動態列表）

$(document).on('click', '.delete', function(e) {
    e.preventDefault();
    var flag = confirm("您確定要刪除嗎？");
    if (flag) {
        var strArr = $(this).attr("id");
        // ... 後續邏輯
    }
});

最佳實踐原則

• 避免在 HTML 內聯 href="javascript:..."，改用 href="javascript:void(0)" 或 href="#" 配合 onclick。
• 不在事件處理函數內重複綁定事件，改用事件委託或直接綁定。
• 動態生成的元素必須使用事件委託 $(parent).on('click', '.selector', handler)。

遵循原則可徹底消除「點擊兩次」等事件綁定異常問題。