jQuery on click event handler data is 'undefined' within AJAX handler

Question

I have a jQuery event handler function that is triggered on click of two buttons - Positive and Negative. In either case, I pass a different data object to the handler (as below).

I have a AJAX POST within this event handler. However I am unable to access the on click event's data inside the AJAX POST handler.

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

Why is e.data undefined within the AJAX POST?

I created a new variable to store the e.data.agree value and it works as expected.

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

Why is e.data undefined in the first case - within the AJAX POST? Does it get overwritten?

NOTE: I have two different environments and it seems to work fine in the test environment but gives the undefined error in production.

Answer 1

Summary:

From what I understand you're seeing that when you directly call the event object (e) in your onclick handler, you intermittently get an error telling you that 'e.data.agree' is undefined.

I actually had to do a bit of reading to be able to explain this better, but as I understand it, it's because the event object that is passed into your click handler is pooled and is later reused for any new events.

Here is an explanation of SyntheticEvent: Mayank Shukla's SyntheticEvent Explaination

Why This Matters To Your Code:

In your code you post to a URL, which obviously have variable latency to return a response and hence fire your post's callback function. In your test environment I'm betting the response is fast enough that the event hasn't been overwritten or nullified. However, in your deployed version there is enough latency that the event has been overwritten.

While it's not exactly true, you can think of the event (e) object as a global variable instead of a local one.

The Solution:

You've already solved the problem with your second snippet. By assigning the event object to a local variable, you ensure that the event object is what you are expecting when your post request response fires the callback function.

I hope that explanation makes sense.