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

问题

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); 
   }
});

回答1:

Bitmanic,

Sadly, you're out of luck using this, but you can still reference the current link. Define your callback to accept an array of links selected by jQuery as its first parameter, and an index as the second parameter:

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

Here's how Fancybox invokes the onComplete hander:

if ($.isFunction(currentOpts.onComplete)) {
    currentOpts.onComplete(currentArray, currentIndex, currentOpts);
}

They aren't using Javascript's call or apply to invoke this function as a method of an object. In other words, this will refer to the global scope of your application (i.e. the document object), so you can't use it to refer back to the object being acted upon (shame on them). Instead, they pass three parameters to the callback for specifying context: currentArray (the selected object), currentIndex, and currentOpts.

回答2:

$(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);

回答3:

Here is my approach - also best approach:

    $(".trigger").fancybox({
        onStart: function(element){
            var jquery_element=$(element);
            alert(jquery_element.attr('id'))
        }
    });

You can see in action at http://www.giverose.com

回答4:

Doing something like this should work:

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

By storing $('a.iframe') in a local variable you can access it inside your onComplete callback function. Or, to put it another way:

...inner functions are allowed access to all of the local variables, parameters and declared inner functions within their outer function(s). A closure is formed when one of those inner functions is made accessible outside of the function in which it was contained, so that it may be executed after the outer function has returned. At which point it still has access to the local variables, parameters and inner function declarations of its outer function. Those local variables, parameter and function declarations (initially) have the values that they had when the outer function returned and may be interacted with by the inner function.

回答5:

I've been having a nightmare today with a similar issue. A solution that we've found works:

When calling the fancybox, set a callback function, eg:

// apply fancybox
$(".someclass").fancybox({
    'transitionIn'      : 'elastic',
    'transitionOut'     : 'elastic',
    'onCleanup'     : ourclosefunction
});

then in the callback function, use something like this:

// callback function
function ourclosefunction(links){
    // get the div id of the fancybox container
    // (by taking data after the # from the end of the url)
    var split = links.toString().split("#");
    var divid = split[1];
}

we've found this works for our inline requirements. We can use divid to do whatever processing of the fancybox content that needed doing.

回答6:

For those who need to get a reference to the link target in Fancybox v2.x events, you can get it like this:

var target = $('a[href=' + this.href + ']');

e.g.

$('.fancybox').fancybox(
   beforeLoad : function(test) {
      var target = $('a[href=' + this.href + ']');
      // do something with link
   },
   afterLoad : function(test) {
      var target = $('a[href=' + this.href + ']');
      // do something with link                  
   }
});

回答7:

did you try something like this:

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

This could be your solution, although you have to write more with less convenience.

来源：https://stackoverflow.com/questions/3920937/how-can-i-use-this-inside-of-fancyboxs-oncomplete-event