colorbox (che utilizza dal vivo) non rebinding dopo jQuery chiamata AJAX

Question

Ho una lista di elementi che sono carico tramite la tecnologia AJAX (utilizzando .load di jQuery ()). Ognuno di questi elementi ha un collegamento (modifica) accanto ad essa che le Lightbox personali (utilizzando colorbox) un po 'modulo di modifica. Quando il lightbox è chiusa uso il onClosed callback per ricaricare la lista ajax per mostrare e le modifiche apportate durante la modifica.

Gli sguardi di chiamata colorbox piace questo:

$('.colorbox').colorbox({
  'iframe':true,
  'onClosed':function(){
    $("#featureList").load("/template/featureList","id="+$("#model_id").val());
  }
});

Il mio aspetto:

<div id="featureList">
  <ul id="features">
    <li id="item_000000000008+0">Element 1 (<a class="colorbox" href="/template/featureLightbox?template_id=000000000008&amp;delta=0">Edit</a>)</li>
    <li id="item_000000000008+1">Element 2 (<a class="colorbox" href="/template/featureLightbox?template_id=000000000008&amp;delta=1">Edit</a>)</li>
  </ul>
</div>

ho guardato il codice colorbox fonte e ho visto che è usi jquery live() per fare il bind. Eccolo:

$('.' + boxElement).live('click', function (e) {
  if ((e.button !== 0 && typeof e.button !== 'undefined') || e.ctrlKey || e.shiftKey || e.altKey) {
    return true;
  } else {
    launch(this);   
    return false;
  }
});

È possibile vedere sopra le opere colorbox modo in cui è legandosi a "boxElement", che è una classe che crea chiama "cboxElement". Prima del live () si legano colorbox aggiunge questa classe (cboxElement) per tutti gli elementi che corrispondono al selettore (.Colorbox nel mio esempio), poi si lega a questa nuova classe.

Quindi, pensato che se ho messo l'esterno colorbox legano del contenuto ajaxed sarebbe legarsi ai collegamenti dopo aver sostituito il div #featureList con ajax, dal vivo () si suppone che si legano a elementi di "ora o in futuro" . Ma non lo fa perché è vincolante per .cboxElement invece di .Colorbox in modo che quando la ricarica Ajax colorbox non ri-aggiungere la classe .cboxElement agli elementi.

Ho provato a chiamare $ .fn.colorbox.init () nel contenuto ajax per arrivare colorbox aggiungere nuovamente la classe .cboxElement agli elementi, ma questo non ha avuto effetto. (Faccio qualcosa di simile quando si tratta di shadowbox, ma non sembra funzionare lo stesso per colorbox.)

Allora ho cercato di inserire tutto il codice colorbox all'interno del contenuto ajax. Quando faccio questo si lega colorbox stanno impilando / concatenamento. Così la seconda volta che lo chiamo io ottenere due colorboxes (e devono colpire il pulsante "Chiudi" due volte per tornare alla schermata principale). La terza volta ottengo tre. Questo perché quando chiamo colorbox di nuovo si aggiunge la classe .cboxElement, rendendo il vecchio dal vivo () lega di nuovo attivo, e aggiunge anche un altro live () si legano ad esso. Ho provato a cancellare le .Live lega () chiamando .die () prima, ma non ha funzionato per qualche ragione.

Ho trovato un paio di post correlati, ma nessuno di loro ha risolto questo problema in quanto colorbox sta già utilizzando in diretta ():
problema con jQuery Colorbox
jQuery AJAX tavolo per una pagina ma ora la colorbox sovrappone non funzionano più

Tutte le altre idee là fuori? Sono davvero perplesso. Mi sento come se dovessi passare a un lightbox diversa, ma in generale come ho colorbox e lavoravo grande tutto il resto del sito fino a quando questo problema ajax si avvicinò.

Grazie !!!

EDIT:

Quindi, in questo caso il mio problema è stato che il mio quadro ( Yii ) è stato compreso uno script colorbox duplicato su ogni chiamata AJAX, che è stato la causa del problema. Così guardare fuori per questo!

Per problemi di tutti avere che non sta affrontando il problema duplicato-sceneggiatura ero: punti @Relic fuori Qui di seguito potete sorta di "eludere" alcuni problemi per fare il proprio jQuery delegato () bind che fa un "chiamata diretta" di colorbox, invece di basarsi su vincolanti live() default di colorbox. Vorrei tweak come questo per il mio caso:

$(document).delegate("#features a", "click", function (event) { // $.colorbox() call  }

Answer 1

Il problema sembra essere legato a qualcosa che non ho notato in un primo momento e quindi non ho messo nella mia interrogazione. Ho modificato la domanda per riflettere queste nuove informazioni.

Il mio problema era che la risposta AJAX era più vincolanti e compreso lo script colorbox più volte. L'aiutante Yii Framework widget di usavo per includere lo script è anche compreso jQuery e Colorbox nella risposta ogni volta. Yii non ha un modo per determinare se gli script necessari (come jQuery) sono già stati inseriti nella pagina principale (tipicamente stateless problema HTTP) in modo da includere nel AJAX parziale rendering ogni volta.

Ho risolto questo problema non si utilizza un Yii Widget per fare il Colorbox vincolante per view renderPartial di ogni chiamata Ajax. Ho semplicemente incluso thecolorbox vincolante per il genitori pagina, in modo che il contenuto di Ajax non ha JS in esso.

Answer 2

Prima di tutto, non si dovrebbe usare .live() è deprecato. Invece imparare a utilizzare .delegate() Troverete questo è un ascoltatore molto più potente e contribuirà a risolvere il problema.

Al caricamento pagina inizialmente il DOM è pronto, e colorbox è initilized per il selettore AJAX chiama un nuovo pezzo della pagina con qualche elemento DOM che è nella lista di selezione colorbox, ma non si nota perché è caricato nella pagina dopo il selettore è stato letto dal javascript.

provare quanto segue - come si guarda body #main per tutti, esistenti e nuovi a[rel='lightbox']:

$("body #main").delegate("a[rel='lightbox']", "click", function (event) {
                    event.preventDefault();
                    $.colorbox({href: $(this).attr("href"),
                            transition: "fade",
                            innerHeight: '515px',
                            innerWidth: '579px',
                            overlayClose: true,
                            iframe: true,
                            opacity: 0.3});});

EDIT per ".on ()"

$("body #main").on("click", "a[rel='lightbox']", function (event) {
                        event.preventDefault();
                        $.colorbox({href: $(this).attr("href"),
                                transition: "fade",
                                innerHeight: '515px',
                                innerWidth: '579px',
                                overlayClose: true,
                                iframe: true,
                                opacity: 0.3
                         });
});

Sì, grande cambiamento, lo so, ma il punto è 'on' metodo può essere utilizzato anche come 'bind', in modo che genere di freddo.

Answer 3

Ho risolto questo in un modo piuttosto semplice.

Se si invia indietro una risposta ajax (di solito una risposta javascript) - collegare il codice vincolante colorbox normale (come si farebbe in qualsiasi luogo), in tale risposta.

$('.colorbox').colorbox({
  'iframe':true,
  'onClosed':function(){
    $("#featureList").load("/template/featureList","id="+$("#model_id").val());
  }
});

allegare questo nella vostra risposta js dal server. questo ha funzionato per me.