Come posso usare $ (this) all'interno dell'evento onComplete di Fancybox?

Question

Sto tentando di utilizzare jQuery $(this) all'interno dell'evento onComplete di Fancybox, ma sto riscontrando problemi. Ecco il mio codice JavaScript:

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

Ho semplificato il codice qui sopra per ottenere il mio punto attraverso, ma io in realtà piacerebbe utilizzare $(this) per diversi motivi che non voglio andare in questa sede.

documentazione del Fancybox mostra esempi di utilizzo this invece di $(this) all'interno della sua documentazione, ma non ho visto alcun esempio in cui o sono stati utilizzati all'interno di onComplete o di altri eventi. Naturalmente ho provato a usare this, senza alcun risultato.

Qualcuno sa come posso fare riferimento al innescato a.iframe elemento utilizzando $(this) o qualsiasi altro mezzo all'interno l'evento onComplete?

Edit: ho avuto questo lavoro utilizzando Blackcoat 's suggerimento, ed ecco la sintassi finale che ha funzionato:

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

Answer 1

Bitmanic,

Purtroppo, sei fuori di fortuna utilizzando this, ma è comunque possibile fare riferimento al collegamento corrente. Definire il callback di accettare una serie di link selezionati da jQuery come primo parametro, e un indice come secondo parametro:

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

Ecco come Fancybox invoca la curva onComplete:

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

Essi aren' t usando Javascript call o apply per invocare questa funzione come metodo di un oggetto. In altre parole, this farà riferimento allo scope globale della tua applicazione (ad esempio l'oggetto document), quindi non puoi utilizzarlo per fare riferimento all'oggetto su cui si sta agendo (vergognarsene). Invece, passano tre parametri al callback per specificare il contesto: currentArray (l'oggetto selezionato), currentIndex e currentOpts.

Answer 2

fare qualcosa di simile dovrebbe funzionare:

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

Memorizzando $('a.iframe') in una variabile locale si può accedere all'interno della vostra funzione di callback onComplete. O, per 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.

Answer 3

Ho avuto un incubo oggi con un problema simile.opere Una soluzione che abbiamo trovato:

Quando si chiama il fancybox, impostare una funzione di callback, ad esempio:

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

poi nella funzione di callback, usare qualcosa di simile:

// 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]; 
} 

abbiamo trovato questo funziona per i nostri requisiti in linea. Possiamo usare divid per fare qualsiasi elaborazione del contenuto di fancybox che è necessario fare.

Answer 4

Hai provato qualcosa di simile:

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

Questa potrebbe essere la soluzione, anche se si deve scrivere di più con meno convenienza.

Answer 5

Qui è il mio approccio - anche approccio migliore:

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

è possibile vedere in azione a http://www.giverose.com

Answer 6

Per chi ha bisogno di ottenere un riferimento alla destinazione del collegamento in eventi v2.x. Fancybox, puoi ottenere in questo modo:

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

es.

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

Answer 7

$ (this) punta all'oggetto Fancybox, ecco perché non punta all'elemento. Se stai cercando di ottenere l'elemento target, puoi fare qualcosa del genere:

var $self = $(this.element);