javascript - 单击事件处理程序数据上的 jQuery 在 AJAX 处理程序中为 'undefined'

Question

我有一个 jQuery 事件处理函数，它在单击两个按钮时触发 - 正和负。在任何一种情况下，我都会将不同的数据对象传递给处理程序(如下所示)。

我在这个事件处理程序中有一个 AJAX POST。但是我无法访问 AJAX POST 处理程序中单击事件的数据。

$('#Positive').on("click", {agree:true}, handlerFunc);
$('#Negative').on("click", {agree:false}, handlerFunc);

function handlerFunc(e){
    e.preventDefault();
   //e.data is valid here
   if (e.data.agree === true){
        //if condition is valid and it enters this block
        startTimer();
    }
   $.post(url_, postData, function(data){ 
        //console.log(e.data); 
        //e.data is undefined at this point
        if (e.data.agree === false){
             return true; 
        }
        //do other stuff
    });
}

为什么在 AJAX POST 中未定义 e.data？

我创建了一个新变量来存储 e.data.agree 值，它按预期工作。

$('#Positive').on("click", {agree:true}, handlerFunc);
$('#Negative').on("click", {agree:false}, handlerFunc);

function handlerFunc(e){
    e.preventDefault();
   //e.data is valid here
   var agree_data = e.data.agree;
   if (e.data.agree === true){
        //if condition is valid and it enters this block
        startTimer();
    }
   $.post(url_, postData, function(data){ 
        //console.log(agree_data); 
        //agree_data is valid at this point
        if (agree_data === false){
             return true; 
        }
        //do other stuff
    });
}

为什么在第一种情况下 e.data 未定义 - 在 AJAX POST 中？它会被覆盖吗？

注意:我有两个不同的环境，它在测试环境中似乎工作正常，但在生产环境中出现未定义的错误。

Answer 1

总结:

据我了解，当您在 onclick 处理程序中直接调用事件对象 (e) 时，您会间歇性地收到错误消息，告诉您“e.data.agree”未定义。

实际上我必须读一些书才能更好地解释这一点，但据我了解，这是因为传递到您的点击处理程序的事件对象被合并，稍后会被重新用于任何新事件。

这里是对 SyntheticEvent 的解释: Mayank Shukla's SyntheticEvent Explaination

为什么这对您的代码很重要:

在您的代码中，您发布到一个 URL，该 URL 显然具有可变延迟以返回响应并因此触发您的帖子的回调函数。在您的测试环境中，我打赌响应足够快，事件没有被覆盖或取消。但是，在您部署的版本中，事件已被覆盖的延迟时间足够长。

虽然这不完全正确，但您可以将事件 (e) 对象视为全局变量而不是局部变量。

解决方案:

您已经用第二个代码段解决了问题。通过将事件对象分配给局部变量，您可以确保事件对象是您在发布请求响应触发回调函数时所期望的对象。

我希望这个解释是有道理的。