HTML/JS 按鈕無回應？排查 jQuery 事件綁定與語法錯誤

常見原因

頁面中「查詢」與「返回」按鈕點擊無反應，通常由以下問題導致：

1. jQuery 未正確載入：確認 <script src="jquery.min.js"> 路徑正確，且在自定義腳本之前載入。
2. 選擇器錯誤：ID 拼寫錯誤（如 #search vs #serach）或元素尚未渲染時綁定。
3. 語法錯誤中斷執行：如缺少分號、括號不匹配、SQL 字串拼接錯誤（query("select * from emp where deptno=" + deptno + "") 缺少右引號）。
4. 表單預設提交行為：<input type="submit"> 會觸發表單提交導致頁面重載，需在事件中呼叫 event.preventDefault() 或改用 type="button"。

修正建議

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() {
    $("#back").click(function(e) {
        e.preventDefault();
        location.href = "welcome.html";
    });
    $("#search").click(function(e) {
        e.preventDefault();
        var deptno = $("#deptno").val();
        // 前端不應直接拼接 SQL，此處僅示範邏輯
        // 實際應透過 AJAX 呼叫後端 API
        if (deptno) {
            sessionStorage.setItem('deptno', deptno);
            location.href = "get_dep_emp.html";
        }
    });
});
</script>

除錯步驟

1. 開啟瀏覽器開發者工具（F12），切到 Console 分頁，查看紅色錯誤訊息。
2. 在點擊處理函數第一行加 console.log('clicked') 確認事件是否觸發。
3. 檢查 Network 分頁，確認 jQuery 檔案狀態碼 200。

最佳實務

• 前端切勿直接拼接 SQL 字串，防止注入攻擊；改由後端驗證參數。
• 使用 type="button" 避免表單自動提交。
• 統一使用 const/let、箭頭函數提升可讀性。