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.

@TheAlpha Yes, it should. I use jQuery 2.2.3 in our production (though it should work fine in that too). I have two different environments and it seems to work fine in the test environment but gives the undefined error in production. I've been banging my head all day since it should work fine as you said. — Alagappan Ramu
– Alagappan Ramu, Commented Feb 9, 2018 at 19:54
The simple answer is scope. 'e' is no longer defined within the callback. — Ryan Gibbs
– Ryan Gibbs, Commented Feb 10, 2018 at 1:00

Ryan Gibbs · Accepted Answer · 2018-02-15 00:33:14Z

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.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related