JavaScript onclick 傳參失效：字符串參數未加引號導致語法錯誤

問題代碼

onclick="deleteAtt(<%=fileName[i] %>, <%=i %>)"
// 生成 HTML 示例：onclick="deleteAtt(test.pdf, 0)"
// JS 引擎解析：deleteAtt(test.pdf, 0) → test.pdf 被視為變量/屬性訪問 → ReferenceError

根本原因

字符串字面量在 JS 中**必須用引號包裹** (單引號或雙引號)。JSP 輸出未加引號，導致瀏覽器解析為標識符而非字符串。

修正方案

// 方案一：JSP 中轉義單引號 (推薦)
onclick="deleteAtt('<%=fileName[i] %>', <%=i %>)"
// 生成：onclick="deleteAtt('test.pdf', 0)"

// 方案二：雙引號包裹，內部單引號 (需處理文件名含引號情況)
onclick='deleteAtt("<%=fileName[i] %>", <%=i %>)'

// 方案三：JSON 序列化確保安全 (最穩健)
onclick="deleteAtt(<%=new org.json.JSONObject().put("name", fileName[i]).toString() %>, <%=i %>)"
// 生成：onclick="deleteAtt({"name":"test.pdf"}, 0)" → JS 端接收對象

JS 函數接收

function deleteAtt(name, id) {
    // name 現為字符串
    alert("刪除: " + name); // 正常彈窗
    $("#" + id).remove();
    $.ajax({ ... });
}

最佳實踐：分離行為與結構 (Unobtrusive JS)

// JSP 僅渲染數據屬性
<input type="button" class="delete-btn" data-filename="<%=fileName[i] %>" data-id="<%=i %>" value="刪除">

// 統一事件委託 (父容器或 document)
$(document).on('click', '.delete-btn', function() {
    var name = $(this).data('filename');
    var id = $(this).data('id');
    deleteAtt(name, id);
});

優勢：無 XSS 風險、HTML 乾淨、動態添加元素自動生效、便於 CSP 策略部署。

常見錯誤清單

• 字符串未加引號
• 字符串包含引號未轉義 (`test'file.pdf` → `'test'file.pdf'` 斷裂)
• 內聯 `onclick` 過長難以維護
• JSP 表達式輸出未經 HTML/JS 雙重編碼