如何让jQuery找到对应行并在AJAX成功时触发动作（使用this）

这个问题我之前也碰到过，核心是回调函数里this的指向问题，我给你拆解下原因和几种解决办法：

为什么原来的代码不生效？ #

在你的代码里，$.post的success回调函数内部，this的指向已经不是触发blur事件的那个td[contenteditable]元素了——默认情况下，这里的this指向的是jQuery的jqXHR请求对象，而不是你需要的DOM元素。所以你用$(this).closest('tr')根本找不到目标行，自然没法给td.editQty添加success类。

解决方案（三种常用方法） #

方法一：提前保存目标元素的引用（最稳妥兼容的方式） #

在事件处理函数里，先把你后续需要操作的DOM元素（比如目标行的td.editQty）缓存到变量里，这样回调函数里直接用这个变量就行，不用依赖this：

$( document ).ready(function() {
  $('tr').on('blur', 'td[contenteditable]', function() {
    // 提前缓存目标元素和需要提交的数据，避免重复DOM查找
    const $currentRow = $(this).closest('tr');
    const $targetQtyTd = $currentRow.children('td.editQty');
    const submitData = {
      modelId: $currentRow.children('td.idmodel').text(),
      qty: $targetQtyTd.text(),
      ajax: true
    };

    $.post("ajax/modQtyModels", submitData, function(data) {
      // 直接用提前缓存的元素变量
      $targetQtyTd.addClass("success");
    });
  });
});

这种方法兼容性最好，不管是ES5还是ES6环境都能正常工作，而且提前缓存DOM元素还能提升性能，避免多次查找DOM。

方法二：使用ES6箭头函数（简洁优雅） #

箭头函数不会绑定自己的this，它会继承外层作用域的this。所以把success回调改成箭头函数，就能直接用外层事件处理函数里的this了：

$( document ).ready(function() {
  $('tr').on('blur', 'td[contenteditable]', function() {
    $.post("ajax/modQtyModels", {
      modelId: $(this).closest('tr').children('td.idmodel').text(),
      qty: $(this).closest('tr').children('td.editQty').text(),
      ajax: true
    }, (data) => {
      // 箭头函数的this继承自外层事件处理函数的this
      $(this).closest('tr').children('td.editQty').addClass("success");
    });
  });
});

这种写法更简洁，但要注意你的项目环境需要支持ES6语法（现在大部分现代浏览器和构建工具都支持了）。

方法三：用$.ajax的context选项（灵活可控） #

如果你习惯使用完整的$.ajax配置，可以通过context参数指定回调函数里的this指向：

$( document ).ready(function() {
  $('tr').on('blur', 'td[contenteditable]', function() {
    $.ajax({
      url: "ajax/modQtyModels",
      method: "POST",
      data: {
        modelId: $(this).closest('tr').children('td.idmodel').text(),
        qty: $(this).closest('tr').children('td.editQty').text(),
        ajax: true
      },
      context: this, // 指定回调里的this指向当前触发事件的元素
      success: function(data) {
        $(this).closest('tr').children('td.editQty').addClass("success");
      }
    });
  });
});

这种方法可以灵活控制this的指向，适合需要在多个回调里复用同一个this的场景。

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