jQuery中$(this).val()返回undefined问题求助（动态ID元素）

我太懂这种动态生成元素搞val()时踩坑的感觉了！结合你说的情况，大概率是这几个原因导致的，咱们一个个排查解决：

1. 先确认this的上下文是不是目标元素 #

很多时候问题出在this的指向不对，比如你用了箭头函数绑定事件，或者在嵌套函数里调用：

// 错误示例：箭头函数里this不指向触发事件的元素
$('.dynamic-input').on('click', () => {
  console.log($(this).val()); // 这里this是外层上下文，不是元素！
});

// 正确做法：用普通函数
$('.dynamic-input').on('click', function() {
  console.log($(this).val()); // 现在this指向触发事件的元素
});

如果是嵌套函数里，可以先把this存起来避免上下文变化：

$('.dynamic-input').on('change', function() {
  const $currentElement = $(this); // 先存好当前元素的jQuery对象
  someOtherFunction(function() {
    console.log($currentElement.val()); // 用存好的对象就不会错了
  });
});

2. 检查你的元素是不是表单控件 #

val()方法只针对表单元素（比如<input>、<select>、<textarea>），如果你的元素是<div>、<span>这类普通元素，用val()肯定返回undefined，这时候应该用text()或者html()：

// 如果是普通元素，获取内容用text()
console.log($(this).text());
// 设置内容也用text()
$(this).text('更新后的内容');

3. 动态生成的元素必须用事件委托 #

因为动态生成的元素在页面初始化时还不存在，直接绑定事件会失效，这时候得把事件绑定到已存在的父元素上（比如document或者固定的容器）：

// 错误示例：直接绑定动态元素，事件根本不会触发
$('.dynamic-input').on('input', function() {
  console.log($(this).val());
});

// 正确做法：用事件委托
$(document).on('input', '.dynamic-input', function() {
  console.log($(this).val()); // 这时候this会正确指向动态生成的元素
});

快速排查小技巧 #

先在函数里加一句console.log(this)，看看输出的是什么：

• 如果输出Window对象，说明this上下文错了，回到第一条解决
• 如果输出DOM元素但不是表单控件，回到第二条
• 如果输出undefined，说明事件没正确绑定到元素上，用事件委托试试

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