JavaWeb 開發：解決 jQuery 點擊事件獲取錯誤 ID 的問題

在使用 jQuery 處理動態生成的刪除鏈接時，常遇到「點擊取消後再點擊其他項目，卻刪除第一項」的問題。根本原因在於選擇器 $('.delete').attr('id') 永遠返回第一個匹配元素的屬性值。

錯誤代碼分析

// 錯誤寫法
function del_sure() {
    var strArr = $(".delete").attr("id"); // 總是獲取第一個 .delete 元素的 id
    // ...
}

正確解決方案：傳遞當前元素引用

在 HTML 中通過 onclick="del_sure(this)" 傳遞當前 DOM 元素，再在函數中用 $(this) 獲取正確 ID：

<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"); // 獲取當前點擊元素的 id
        var str = strArr.split(",");
        var href = "bookServlet?method=remove&pageNo=" + str[0] + "&id=" + str[1];
        window.location.href = href;
    }
}

關鍵點總結

• 避免使用類選擇器獲取當前元素屬性，應直接傳遞 this 引用。
• 使用 javascript:void(0) 替代 javascript:del_sure() 防止頁面跳轉。
• 確保 ID 格式統一（如 pageNo,id），方便 split(',') 解析。

這種模式同樣適用於編輯、查看等所有列表操作，是 JavaWeb 前端開發的基礎技巧。