Why does a global variable captured in a $.get() callback closure always hold the same value?

Question

I'm having a bit of trouble capturing the value of a global variable in my $.get() callback:

Relevant markup

<div class="block" id="blog"></div>
<div class="block" id="music"></div>
<div class="block" id="video"></div>

Relevant code

$('div.block').each(function() {

 $this_id = $(this).attr('id');

 alert($this_id); // outputs: blog, music, video

 $.get('test.php', {id: $this_id}, function(data) {

  alert($this_id); // outputs: blog, blog, blog (WHY?)

  $('div#' + $this_id).html(data);

 });
});

I'm trying to get HTML content and insert it into each of the block divs, but $this_id doesn't get changed inside the call to $.get(). Can anybody explain this?

Answer 1

You have to define $this_id within the function scope, or it'll default to being a global variable. Simply change this:

$this_id = $(this).attr('id');

to this:

var $this_id = $(this).attr('id');

It's a good idea to get into the habit of explicitly declaring all of your variables anyway... Much easier to keep track of them that way.