Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 4 down vote favorite

I had a colleague ask me why he couldn't access an event parameter from a callback function. Turns out that jquery seems to be setting the event to null after the call finishes and creating a temporary local variable fixed the problem (see below).

Then that got me thinking, why is 'message' even available to the callback. Can someone please explain?

$('some seletor').click({msg: message},function(event){
    alert(event.data.msg); //event.data.msg is not available to the json callback because event is null
    var message = event.data.msg; //message will be available to the callback...why?
    $.getJSON('ajax/test.json', function(data) {
        alert(message); //works ok - why is the message variable visible here at all, should it not have gone out of scope when the above function ended?
        alert(event.data.msg); //will crash, seems that event has been set to null by the framework after the function finished
    });    
});
share|improve this question
2  
+1 for Klaus also (that was the link I used to understand it) – jax 7 hours ago

3 Answers

up vote 4 down vote accepted

Any variable that exists in a given scope is available to all functions that are defined within that scope. (This is just how scope is defined to work in JS, this part of the language specification is probably a good entry point if you want the nitty gritty of how it is defined).

Since the function expression that defines the callback is inside the function that defines the variable, the variable is available to it.

share|improve this answer
for others, the link that klaus gave is better for understanding closures (see comment on original question) – jax 7 hours ago
up vote 3 down vote

Try this:

$('some seletor').click({msg: message},function(ev){
    alert(ev.data.msg);
    var message = ev.data.msg;
    $.getJSON('ajax/test.json', function(data) {
        alert(message);
        alert(ev.data.msg);
    });    
});

instead of event. Because event is global object window.event and it becomes undefined when event finishes. You can use event object without taking it from parameter like this:

$('some seletor').click({msg: message},function(){
    alert(event.data.msg);   
});
share|improve this answer
This does not answer the question. At all... – Klaus Byskov Pedersen 8 hours ago
I answered why event variable was not available. – karaxuna 8 hours ago
Ok. That was not the question though. – Klaus Byskov Pedersen 8 hours ago
@KlausByskovPedersen that was exactly a question. if he uses ev instead of event,then alert(ev.data.msg); will not crash – karaxuna 8 hours ago
Then that got me thinking, why is 'message' even available to the callback. Can someone please explain? As far as I can read, he is asking why the variable message is available to the callback function. Not why the event gets overwritten. – Klaus Byskov Pedersen 8 hours ago
show 6 more comments
up vote 0 down vote

If you forgive the pseudo code - try thinking of it as nested blocks - this sort of thing

function foo()
{
  int bar=0;

  //inner block
  {
    bar++;
  }

}

or more specifically 

function click()
{
 variable {msg: message}

  //inner block
  function(ev) 
  {
   ....     
  }
}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.