为动态元素绑定事件：数字网格点击无法获取元素值求助

嘿，刚接触编程遇到这种小坑很正常，我来帮你一步步捋清楚问题在哪，怎么解决～

核心问题分析 #

你现在遇到的问题主要有两个：

1. 箭头函数导致this指向错误：你用了ES6的箭头函数作为事件处理函数，但箭头函数没有自己的this，它会继承外层作用域的this（这里就是window对象），所以你拿不到点击的单元格元素。
2. HTML属性使用错误：<td>不是表单元素（比如<input>），它没有原生的value属性，浏览器不会把这个属性当成有效属性解析，所以你用attr('value')也拿不到值。

分步解决方法 #

第一步：修正PHP生成的HTML代码

把<td>里的value换成标准的自定义属性data-value，这是HTML5用来存储自定义数据的规范写法，同时修正循环末尾多余的空行问题：

echo " <div id='grid'> <table> ";
echo "<tr>";
for ($i=1; $i <=500; $i++) {
    // 用data-value存储数字，替代不规范的value属性
    echo " <td class='item active' id='item".$i."' data-value='".$i."'>".str_pad($i, 3, "0", STR_PAD_LEFT)."</td> ";
    // 去掉$i==0的判断（因为i从1开始永远不会触发）
    if ($i%10==0) {
        echo "</tr><tr>";
    }
}
echo " </tr></table> </div>"; // 闭合最后一行<tr>，避免多余空行

第二步：修正jQuery事件绑定代码

放弃箭头函数，改用普通函数作为事件处理函数，这样this就会指向触发点击事件的<td>元素：

方式一：事件委托（适合动态生成的元素）

$(document).on('click','[id^="item"]', function() {
    // 获取元素ID
    console.log($(this).prop('id'));
    // 获取data-value里的数值
    console.log($(this).data('value'));
    // 或者直接获取单元格内的文本（去掉多余空格）
    console.log($(this).text().trim());
});

方式二：直接绑定（如果元素在页面加载时已经生成）

$(document).ready(function() {
    $('.item').click(function() {
        // 获取自定义属性值
        console.log($(this).data('value'));
        // 获取文本内容
        console.log($(this).text().trim());
        // ❌ 注意：td没有val()方法，不要用$(this).val()
    });
});

额外小提示 #

• 如果你还是想尝试箭头函数，可以通过事件参数的target来获取点击元素：

  $(document).on('click','[id^="item"]', (e) => {
      console.log($(e.target).data('value'));
  });
  

• 用data('value')比attr('data-value')更方便，因为jQuery会自动帮你转换数据类型（比如这里的数字会变成Number类型，而不是字符串）。

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