点击job-detail行获取td内隐藏input的值，jQuery代码失效求助

我一眼就看出问题所在啦——你用了箭头函数来绑定点击事件，这会导致this的指向完全不对！箭头函数不会绑定自己的this，它会继承外层作用域的this，所以这里的$(this)根本不是被点击的<tr>元素，自然找不到对应的input。

修正方案一：换成普通函数 #

把箭头函数改成普通的匿名函数，这样this就会自动指向触发点击事件的.job-detail元素了：

$('.job-detail').click(function() {
  alert($(this).find('input[name="id"]').val());
});

修正方案二：使用事件对象的currentTarget #

如果你坚持想用箭头函数，可以通过事件参数的currentTarget来获取触发事件的元素：

$('.job-detail').click((e) => {
  alert($(e.currentTarget).find('input[name="id"]').val());
});

额外注意事项 #

1. 确保DOM加载完成：最好把你的代码放在$(document).ready()里面，避免DOM还没渲染完成就执行代码，导致找不到元素：

$(document).ready(function() {
  $('.job-detail').click(function() {
    alert($(this).find('input[name="id"]').val());
  });
});

2. 动态生成的元素？用事件委托：如果这些.job-detail行是后续通过JS动态添加到页面的，直接绑定点击事件会失效，这时候要用事件委托来监听：

$(document).on('click', '.job-detail', function() {
  alert($(this).find('input[name="id"]').val());
});

这样修改后，点击对应的行就能正确弹出隐藏input的value啦！

内容的提问来源于stack exchange，提问作者Nguyen Hoang Vu