JQuery技术问题：点击按钮修改TD内容，AJAX回调中代码失效

这个问题大概率是AJAX回调函数里的上下文（this指向）不对导致的——当你在$.ajax的success回调里用$(this)时，它已经不再指向点击的那个.btnbook按钮了，自然找不到对应的TD元素。

解决步骤： #

1. 在按钮点击事件的最开始，把当前按钮的引用（或者它所在的TD）保存到一个变量里，这样回调函数就能访问到这个变量。
2. 在success回调里直接使用这个预存的变量来修改TD内容。

完整代码示例： #

$('.btnbook').on('click', function() {
    // 保存当前按钮所在的TD元素到变量，避免回调里上下文丢失
    const $targetTd = $(this).closest('td');
    
    // 这里直接修改是有效的，因为this还是指向当前按钮
    // $targetTd.text('Booked'); 

    $.ajax({
        url: '你的请求地址',
        method: 'POST/GET',
        data: { /* 你的请求数据 */ },
        success: function(response) {
            // 现在用预存的$targetTd来修改，就不会找不到元素了
            $targetTd.text('Booked');
            // 可以在这里处理其他成功逻辑，比如提示用户
            alert('预订成功！');
        },
        error: function(xhr) {
            // 别忘了处理错误情况，比如恢复按钮或者提示失败
            alert('预订失败，请重试');
        }
    });
});

额外注意点： #

• 如果你的表格是动态生成的（比如通过AJAX加载的表格行），那你需要用事件委托来绑定点击事件，否则新生成的按钮不会触发事件：

  // 事件委托写法，绑定到静态的父元素（比如table）
  $('table').on('click', '.btnbook', function() {
      const $targetTd = $(this).closest('td');
      // 后续AJAX逻辑同上
  });
  

• 另外，建议在发起AJAX请求后先禁用按钮，防止用户重复点击：

  const $btn = $(this);
  $btn.prop('disabled', true); // 禁用按钮
  // AJAX请求里，success或error后可以根据情况恢复或保持禁用
  

这样应该就能解决你遇到的问题了——核心就是提前保存需要操作的DOM元素引用，避免回调里上下文丢失导致找不到元素。

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