Javascript文件中Ajax点击事件无法触发问题排查

1. 类名动态切换导致事件委托失效
   表格行的onMouseOver会将className直接替换为over，鼠标点击时元素类名是over而非绑定事件的outi，事件委托在冒泡阶段检查目标元素类名时不匹配，因此无法触发点击事件。
2. 事件处理函数参数错误
   你将事件对象当作行数据传入，JSON.stringify(MyObj)会把事件对象（而非行内业务数据）转为JSON，既不符合需求，也可能导致请求数据格式异常。
3. 缺少JSON请求头
   发送JSON格式数据时未设置contentType: "application/json"，服务器可能无法正确解析请求体。

1. 重构hover逻辑与事件绑定 #

移除行内的onMouseOver/onMouseOut，改用jQuery动态添加/移除类（而非替换整个类名），同时绑定固定的选择器确保点击事件始终生效：

$(document).ready(function() {
    // 处理行hover效果
    $(document).on('mouseenter', '.table-row', function() {
        $(this).addClass('over').removeClass('outi');
    }).on('mouseleave', '.table-row', function() {
        $(this).addClass('outi').removeClass('over');
    });

    // 绑定行点击事件
    $(document).on("click", '.table-row', function() {
        // 从行内提取业务数据（示例：根据td索引提取）
        var $row = $(this);
        var clientData = {
            name: $row.find('td:eq(0)').text().trim(),
            birthDate: $row.find('td:eq(1)').text().trim()
            // 按需添加其他字段
        };
        var requestJson = JSON.stringify(clientData);

        $.ajax({
            method: "POST",
            url: "Client_frameServlet",
            async: true, // 禁用同步请求，避免页面阻塞
            data: requestJson,
            contentType: "application/json", // 必须设置，告知服务器请求体格式
            dataType: "json",
            success: function() {
                alert('Ajax 请求成功');
            },
            error: function(xhr, status, error) {
                console.error('请求失败:', error);
                alert('请求失败，请查看控制台日志');
            }
        });
    });
});

2. 修改HTML行标记 #

给表格行添加固定类table-row，确保事件绑定不受hover类名切换影响：

<tr class="table-row outi">
    <td class=texte7 align=left colspan=5>&nbsp;Aucun client ne trouve</td>
</tr>

3. 额外优化建议 #

• 避免使用async: false：同步请求会阻塞页面交互，严重影响用户体验，jQuery 3.0+已不推荐使用。
• 优先使用数据属性：如果行数据是动态生成的，建议通过data-*属性存储（如<tr class="table-row outi" data-client-id="123">），后续用$(this).data('clientId')提取，比从文本节点读取更可靠。

内容的提问来源于stack exchange，提问作者karDEVproj