jQuery事件委托绑定表格点击后无法获取行单元格内容怎么解决？

问题根因 #

你的事件委托绑定的响应目标是<table>标签，触发点击时回调函数里的this指向整个表格DOM元素。closest()方法是从当前元素开始向上查找匹配的祖先元素，表格本身的父节点是静态的div#loadQA，不存在<tr>祖先节点，所以你拿到的$row是空jQuery对象，后续自然获取不到单元格内容。

修正方案 #

方案1（更推荐）：调整事件委托目标为行元素

直接把响应目标设置为<tr>，此时触发回调时this会直接指向被点击的行元素：

$('#loadQA').on('click', 'table tr', function () { 
    // 获取第一个td单元格内容
    var firstCellText = $(this).find("td").eq(0).text();
    alert(firstCellText);
    // 扩展：获取该行所有单元格内容（包含第一列的th）
    var allCellContents = []
    $(this).find("td, th").each(function() {
        allCellContents.push($(this).text())
    })
    console.log('当前行所有内容：', allCellContents)
})

方案2：保留绑定到table的逻辑，通过事件对象定位点击元素

如果有特殊需求需要绑定到<table>本身，可以通过事件对象获取实际触发点击的节点，再向上查找父级行：

$('#loadQA').on('click', 'table', function (e) { 
    var $row = $(e.target).closest("tr");
    var firstCellText = $row.find("td").eq(0).text();
    alert(firstCellText);
})

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