jQuery点击事件中AJAX处理器内e.data为undefined的原因咨询

这是个很常见的作用域与上下文绑定问题，我来给你拆解清楚：

首先你得明白：事件处理函数里的e（事件对象）只在当前事件处理函数的作用域内有效。当你发起AJAX请求时，$.ajax()的回调函数（比如success）是一个完全独立的异步函数——它的执行时机是服务器返回响应后，此时原事件处理函数早已执行完毕，而且这个回调函数本身并没有接收原来的事件对象e作为参数，所以你在回调里访问的e根本不是原来那个事件对象，自然e.data就是undefined了。

举个贴合你场景的代码例子，你的写法大概是这样的：

$('.positive, .negative').on('click', {agree: true}, function(e) {
  // 这里的e是事件对象，e.data能正常访问
  console.log(e.data.agree); // 输出true或false

  $.ajax({
    url: '/your-api-endpoint',
    method: 'POST',
    data: {content: 'some-value'},
    success: function(response) {
      // 这里的e已经不是原来的事件对象了！
      console.log(e.data); // 结果是undefined
    }
  });
});

核心原因拆解： #

1. 作用域隔离：AJAX回调是异步执行的，它属于一个全新的函数作用域，不会自动继承外层事件处理函数里的e变量引用。只有你在事件处理函数里把e.data存到当前作用域的变量中，回调才能通过闭包机制访问到这个值。
2. 上下文变化：顺带提一句，AJAX回调里的this指向也不是原来的按钮元素（默认指向$.ajax的配置对象），不过这和你问的e.data问题关联不大，但也是异步回调里常见的小坑。

你已经用到的正确解决思路： #

把e.data.agree存到当前作用域的变量中，利用闭包保留引用：

$('.positive, .negative').on('click', {agree: true}, function(e) {
  // 把需要的值存到当前作用域的变量里
  const agreeStatus = e.data.agree;

  $.ajax({
    url: '/your-api-endpoint',
    method: 'POST',
    data: {content: 'some-value'},
    success: function(response) {
      console.log(agreeStatus); // 正常输出true/false
    }
  });
});

其他可选的解决方法： #

• 使用箭头函数：箭头函数不会绑定自己的作用域，会直接继承外层作用域的变量，所以能直接访问到原事件对象e：

$('.positive, .negative').on('click', {agree: true}, function(e) {
  $.ajax({
    url: '/your-api-endpoint',
    method: 'POST',
    data: {content: 'some-value'},
    success: (response) => {
      console.log(e.data.agree); // 正常访问
    }
  });
});

总结一下：异步回调函数有独立的作用域，不会自动携带外层函数的参数引用，你需要通过闭包（存变量）、箭头函数等方式，把需要的变量“传递”到回调函数的作用域中。

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