jQuery动态生成<tr>绑定click事件获取data-key值返回undefined问题

嘿，这个问题我之前也碰到过！核心原因是你在动态生成DOM元素（也就是那些表格行）之后，直接用常规的点击事件绑定是无效的——因为事件绑定代码执行的时候，这些新生成的<tr>还不存在呢，自然没法被绑定到事件上。另外也得先检查下你HTML拼接的语法有没有问题，这也可能导致data-key没正确渲染出来。

下面给你一步步解决的方案：

1. 用事件委托来绑定点击事件 #

利用事件冒泡的特性，把点击事件绑定到已经存在的父元素上（比如你的.table表格，它应该是页面加载时就存在的），然后指定只处理.trainInfo元素的点击。这样不管你的表格行什么时候生成，点击时都会触发事件。

代码示例：

// 绑定到父元素.table，监听子元素.trainInfo的点击
$('.table').on('click', '.trainInfo', function() {
    // this就是被点击的<tr>元素
    var dataKey = $(this).data('key');
    console.log(dataKey); // 现在应该能拿到正确的值了
    
    // 如果要拿<td>上的data-key，也可以这么写：
    // var tdDataKey = $(this).find('td').first().data('key');
});

2. 修复HTML拼接的语法错误 #

看你给出的代码片段，这里明显有语法问题：

var row = "<tr class= 'trainInfo' data-key='" + dataKey + "'><td data-key='" + dataKey + "' >" $('.table').append(row + (childSnapshot.val().train) + "</td><td>" + (childSnapshot.val().destination) + "</td><td>" + (childSnapshot.val().frequency) + "</td><td>" + (nextArrival) + "</td...

你在拼接row字符串后直接写了$('.table').append(...)，中间缺了加号连接，而且标签也没闭合正确。正确的写法应该是先把完整的行字符串拼接好，再追加到表格里：

// 先拼接完整的<tr>内容
var row = "<tr class='trainInfo' data-key='" + dataKey + "'>" +
          "<td data-key='" + dataKey + "'>" + childSnapshot.val().train + "</td>" +
          "<td>" + childSnapshot.val().destination + "</td>" +
          "<td>" + childSnapshot.val().frequency + "</td>" +
          "<td>" + nextArrival + "</td>" +
          // 别忘了闭合<tr>标签
          "</tr>";
// 再追加到表格
$('.table').append(row);

如果HTML拼接错误，data-key属性可能根本没被正确渲染到DOM上，那自然拿不到值。

3. 两种获取data属性的方式选适合的 #

• $(element).data('key')：jQuery会把data属性的值缓存起来，第一次读取后即使DOM上的属性变了，它还是返回旧值，适合不需要动态修改data-key的场景。
• $(element).attr('data-key')：直接从DOM上读取最新的属性值，如果你之后需要修改data-key的值，建议用这种方式。

比如用attr获取的写法：

var dataKey = $(this).attr('data-key');

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