如何通过(this)选择器在jQuery中重置表单？代码失效求解决

嘿，这个问题我太熟了！你遇到的$(...)[0].reset is not a function错误，核心原因是AJAX回调函数里的this指向已经不是原来的表单元素了。

默认情况下，jQuery的$.post回调函数里的this指向的是AJAX请求对象，而不是你绑定submit事件的表单。这时候你去调用reset()自然会报错，因为请求对象根本没有这个方法。

下面给你几种靠谱的解决方案：

方案1：提前保存表单元素（兼容性最好） #

在submit事件回调里，先把表单DOM元素存到变量里，这样在AJAX回调里就能直接用了：

$('#myform').submit(function (event) {
  event.preventDefault();
  // 提前把表单DOM元素存到变量，避免this指向变化的问题
  const formElement = this;
  $.post($(this).attr('action'), $(this).serialize(), function(data, status) {
    // 直接调用表单元素的reset方法
    formElement.reset();
  });
});

方案2：用箭头函数继承外层this（ES6+） #

箭头函数不会改变this的指向，它会继承外层作用域的this，也就是submit事件回调里的表单元素：

$('#myform').submit(function (event) {
  event.preventDefault();
  $.post($(this).attr('action'), $(this).serialize(), (data, status) => {
    // 这里的this就是外层的表单元素，直接调用reset即可
    this.reset();
    // 或者用jQuery方式：$(this)[0].reset(); 效果一样
  });
});

方案3：重新通过选择器获取表单（简单但效率稍低） #

如果上面两种方式你觉得麻烦，也可以直接重新通过ID选择器获取表单元素，不过这种方式在页面有多个相同ID元素时会出问题，所以只推荐在确定ID唯一的情况下用：

$('#myform').submit(function (event) {
  event.preventDefault();
  $.post($(this).attr('action'), $(this).serialize(), function(data, status) {
    $('#myform')[0].reset();
  });
});

个人最推荐方案1，兼容性拉满，不管是旧浏览器还是新环境都能正常运行~

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