[jQuery] AJAX requests and THIS

Question

I'm having a little problem when trying to target an A tag inside a $('div').fadeOut() callback.

I got this

$('.anchor').click(function() {
    $('#div').fadeOut(null, showDiv);
    $('#div').fadeIn();
    return false;
});

showDiv is an AJAX request which I use $(this) inside it trying to refer to the A tag clicked but I noticed that it refers to the div #div

What I want to do is to do some AJAX request when a linkis clicked, but I want it to happen only after the DIV's fade out. This way, the request would populate #div and the new content will only show up when it fades in again.

Answer 1

You can change the context using $.proxy(), like this:

$('.anchor').click(function() {
  $('#div').fadeOut(null, $.proxy(showDiv, this));
  $('#div').fadeIn();
  return false;
});

You can test it here, or do the same thing manually:

$('.anchor').click(function() {
  var self = this;
  $('#div').fadeOut(null, function() {
    showDiv.apply(self);
  });
  $('#div').fadeIn();
  return false;
});