Question

我有一个jQuery事件处理函数，只需单击两个按钮即可触发 - 正面和负面。在任何一种情况下，我都将一个不同的数据对象传递给处理程序（如下所示）。

我在此事件处理程序中有一个AJAX POST。但是，我无法访问AJAX POST处理程序中的on 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
    });
}

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

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

Answer 1

<强>要点：

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

我实际上必须做一些阅读才能更好地解释这一点，但据我理解，这是因为传递给你的点击处理程序的事件对象是池化的，后来被重用于任何新事件。 / p>

以下是SyntheticEvent的解释： Mayank Shukla's SyntheticEvent Explaination

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

在你的代码中你发布到一个URL，它显然具有可变的延迟以返回响应，从而触发你的帖子的回调函数。在您的测试环境中，我认为响应速度足够快，事件未被覆盖或无效。但是，在部署的版本中，有足够的延迟来覆盖事件。

虽然这不完全正确，但您可以将事件（e）对象视为全局变量而不是本地变量。

解决方案：

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

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

点击事件处理程序数据上的jQuery未定义＆＃39;在AJAX处理程序中

1 个答案: