点击事件处理程序数据中的jQuery在AJAX处理程序中为“未定义”

Question

我有一个jQuery事件处理程序函数，可通过单击两个按钮（正数和负数）来触发。 无论哪种情况，我都将不同的数据对象传递给处理程序（如下所示）。

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

$('#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
    });
}

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

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

Answer 1

摘要：

据我了解，您看到的是，当您在onclick处理程序中直接调用事件对象（e）时，您会间歇性地收到一条错误消息，告诉您'e.data.agree'未定义。

我实际上需要做一些阅读才能更好地解释这一点，但是据我了解，这是因为传递到您的点击处理程序中的事件对象已合并，以后可用于任何新事件。

这是对SyntheticEvent的解释： Mayank Shukla的SyntheticEvent解释

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

在您的代码中，您发布到URL，该URL显然具有可变的延迟以返回响应，从而触发您帖子的回调函数。 在您的测试环境中，我敢打赌，响应速度足够快，因此事件没有被覆盖或无效。 但是，在您部署的版本中，有足够的延迟，该事件已被覆盖。

尽管并非完全正确，但您可以将事件（e）对象视为全局变量，而不是局部变量。

解决方案：

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

我希望这种解释是有意义的。