How can I use $(this) inside of Fancybox's onComplete event?

Ray Brown picture Ray Brown · Oct 13, 2010 · Viewed 21.2k times · Source

I'm trying to use jQuery's $(this) inside of Fancybox's onComplete event, but I'm running into trouble. Here's my javascript code:

$('a.iframe').fancybox({  
  centerOnScroll: true,  
  onComplete: function(){  
    var self = $(this);  
    var title = self.title;  
    alert(title.text());  
  }  
});

I have simplified the code above to get my point across, but I actually would love to use $(this) for several reasons that I won't go into here.

Fancybox's documentation shows examples of using this instead of $(this)within its documentation, but I didn't see any examples where either were used inside of onComplete or other events. I of course tried using this, much to no avail.

Does anyone know how I can reference the triggered a.iframe element by using $(this) or any other means within the onComplete event?

Edit: I got this to work using Blackcoat's suggestion, and here's the final syntax that worked:

$('a.iframe').fancybox({
  centerOnScroll: true,
  onComplete: function( links, index ){
    var self = $(links[index]);  
    var title = self.find('.title').text();  
    alert(title); 
   }
});

Answer

emphaticsunshine picture emphaticsunshine · Oct 2, 2012

$(this) points to Fancybox object so thats why it doesn't point to element. If you are trying to get the target element, you can do something like this:

var $self = $(this.element);