Fancybox, che consente a Fancybox di associare LIVE() agli elementi caricati sulla pagina dopo il caricamento

Question

Ho una pagina che carica e dopo il caricamento carica un elenco di LI per popolare un feed di notizie.

<li><a href="/url/" class="quickview">quick view</a></li> 
<li><a href="/url/" class="quickview">quick view</a></li> 
<li><a href="/url/" class="quickview">quick view</a></li> 

Sto cercando di ottenere casella di fantasia per innescare quando un utente fa clic sulla descrizione breve ma non hanno avuto fortuna. Qualche idea?

$(document).ready(function() { 
    $('.quickview').fancybox(); 
}); 

cercato anche:

$(document).ready(function() { 
    $('a.quickview').live('click', function() { 
     $(this).fancybox(); 
    }); 
}); 

http://fancybox.net/

Grazie per tutte le idee ...

Answer 1

Il problema è quello di allegare fancybox nell'elemento caricato AJAX, giusto?

Ho avuto gli stessi problemi e ho trovato this solution.

copio incollarlo qui, vedere la segnalazione di bug originale per ulteriori informazioni:

$.fn.fancybox = function(options) { 

$(this) 
    .die('click.fb') 
    .live('click.fb', function(e) {  
    $(this).data('fancybox', $.extend({}, options, ($.metadata ? $(this).metadata() : {}))) 
    e.preventDefault(); 
    [...] 

merito va a jeff.gran.

Answer 2

Dalla mia comprensione della Fancybox, la chiamata alla fancybox() semplice attribuisce il plugin selezionato elemento. Chiamando fancybox su un evento click non si aprirà nulla.

penso che basta aggiungere

$(li_element_that_you_create).fancybox(); 

al codice che crea i nuovi LI elementi nel proprio elenco

EDIT

Se stai usando load, allora si farebbe qualcosa come:

$('#ul_id_goes_here').load('source/of/news.feed', function() { 
    $('.quickview').fancybox(); 
}); 

Answer 3

questo dovrebbe funzionare dopo ogni richiesta AJAX

$(document).ajaxStop(function() { 
    $("#whatever").fancybox(); 
}); 

Answer 4

vecchia questione, ma potrebbe essere utile per i ricercatori futuri.

La mia soluzione preferita è quella di sparare fancybox manualmente dall'interno l'evento in diretta, ad esempio:

$('.lightbox').live('click', function() { 
    $this = $(this); 
    $.fancybox({ 
     height: '100%', 
     href: $this.attr('href'), 
     type: 'iframe', 
     width: '100%' 
    }); 
    return false; 
}); 

EDIT: Da jQuery 1.7 dal vivo() è deprecato e() dovrebbe essere usato al posto. Vedi http://api.jquery.com/live/ per maggiori informazioni.

Answer 5

Dal .on è ora raccomandato sopra .live, e dopo aver letto il documentation on delegated events, ecco una soluzione mi è venuta (supponendo che gli elementi hanno una classe di 'innesco-modale'):

$(document).on('click', '.trigger-modal', function() { 
    // remove the class to ensure this will only run once 
    $(this).removeClass('trigger-modal'); 
    // now attach fancybox and click to open it 
    $(this).fancybox().click(); 
    // prevent default action 
    return false; 
});