colorbox (qui utilise live) pas de reliaison après l'appel ajax jQuery

Question

J'ai une liste d'éléments que j'chargement via ajax (à l'aide de jQuery .load()).Chacun de ces éléments a un (edit) lien suivant à ce que les caissons (à l'aide de colorbox) un petit formulaire de modification.Lorsque la lightbox est fermé, j'ai utiliser le onClosed de rappel pour recharger l'ajax liste pour afficher et les modifications apportées lors de l'édition.

La colorbox appel semble avoir ceci:

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

Ma liste ressemble à ceci:

<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>

J'ai regardé la colorbox code source et vu qu'il utilise jquery live() pour faire la liaison.Ici, il est:

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

Vous pouvez voir ci-dessus la manière colorbox travaille est en liaison à "boxElement", qui est une classe, il crée appelé "cboxElement".Avant le live() bind colorbox ajoute cette classe (cboxElement) de tous les éléments correspondant au sélecteur (.colorbox dans mon exemple), puis se lie à cette nouvelle classe.

Pensé que si j'ai placé le colorbox lier à l'extérieur de la ajaxed contenu lier des liens après j'ai remplacé le #featureList div avec l'ajax, comme live() est censé se lier à des éléments de "maintenant ou dans l'avenir".Mais ce n'est pas parce que c'est contraignant pour .cboxElement au lieu de .colorbox ainsi, lorsque l'ajax recharge colorbox ne pas ajouter de nouveau le .cboxElement classe aux éléments.

J'ai essayé d'appeler $.fn.colorbox.init() dans le contenu ajax pour obtenir colorbox pour ajouter à nouveau l' .cboxElement classe aux éléments, mais cela n'a eu aucun effet.(Je fais quelque chose comme cela lorsque l'on traite avec shadowbox, mais il ne semble pas fonctionner de la même pour colorbox.)

Alors j'ai essayé de placer toutes les colorbox code à l'intérieur du contenu ajax.Quand je fais cela le colorbox lie sont empilement/chaînage.Donc la deuxième fois que je l'appel, je reçois deux colorboxes (et devez cliquer sur le bouton "fermer" deux fois pour revenir à l'écran principal).La troisième fois que je reçois trois.C'est parce que quand je l'appelle colorbox encore, il ajoute l' .cboxElement classe, en faisant l'ancien live() se lie de nouveau actif, et il ajoute aussi un AUTRE live() lier à elle.J'ai essayé de supprimer les données .live() lie en l'appelant .die() tout d'abord, mais il ne fonctionne pas pour une raison quelconque.

J'ai trouvé un couple de postes liés à l', mais aucun n'a résolu ce problème depuis colorbox est déjà à l'aide de live():
Problème avec jQuery Colorbox
jQuery AJAX table à une page, mais maintenant la colorbox superpositions de ne plus fonctionner

Toutes les autres idées là-bas?Je suis vraiment perplexe.Je me sens comme je devrais passer à un autre lightbox, mais en général, j'aime colorbox et il a été génial de travailler partout ailleurs sur le site jusqu'à ce que ajax problème est venu.

Merci!!!

EDIT:

Donc, dans ce cas mon problème était que mon cadre (Yii) a été y compris un double colorbox le script à chaque appel AJAX, qui a été à l'origine du problème.Donc attention pour que!

Pour tout le monde d'avoir des problèmes qui n'est PAS confronté à la double-script question, j'ai été: @Relique points ci-dessous, vous pouvez sorte de "pas de côté" de quelques problèmes en faisant votre propre jQuery délégué() bind qui fait un "appel direct" de colorbox, au lieu de s'appuyer sur colorbox par défaut live() de liaison.Je voudrais tordre comme ça pour mon cas:

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

Answer 1

Le problème semble être lié à quelque chose que je n'avais pas remarqué au premier abord et, par conséquent, n'a pas mis dans ma question.J'ai édité la question de tenir compte de cette nouvelle information.

Mon problème était que l'AJAX réponse était multiple de liaison et y compris la colorbox script plusieurs fois.La Yii Framework helper widget que j'utilisais pour inclure le script est aussi notamment jQuery Colorbox et de la réponse à CHAQUE FOIS.Yii n'ont pas un moyen pour déterminer si les scripts requis (comme jQuery) ont déjà été inclus dans la page principale (typique apatrides HTTP problème) donc il l'inclut dans l'AJAX partielle de rendre à chaque fois.

J'ai résolu ce problème en n'utilisant pas un Yii Widget pour faire la Colorbox liaison sur chaque appel Ajax est renderPartial vue.Je viens d'inclure thecolorbox de liaison sur l' parent page, de sorte que le contenu Ajax n'a pas de JS en elle.

Answer 2

Tout d'abord, vous ne devriez pas utiliser .live() il est obsolète.Au lieu d'apprendre comment l'utiliser .delegate() Vous trouverez ce est un beaucoup plus puissant auditeur et vous aidera à résoudre votre problème.

Au chargement de la page initialement, le DOM est prêt, et colorbox est initilized pour le sélecteur Les appels AJAX, une nouvelle pièce de la page avec de l'élément du DOM qui est dans la colorbox liste de sélection, mais n'est-ce pas remarqué parce qu'il chargé dans la page une fois que le sélecteur a été lu par le javascript.

Essayez ce qui suit - comme c'montres body #main pour tous, nouveaux et existants 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 pour ".sur()"

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

Oui, un grand changement, je sais, mais le point est le " on "de la méthode peut également être utilisé comme "liaison", donc c'est plutôt cool.

Answer 3

j'ai résolu ce problème d'une manière assez facile.

Si vous êtes en envoyant une requête ajax réponse (généralement un javascript réponse) - joindre la normale colorbox code de liaison (comme vous le feriez dans tout lieu) dans cette réponse.

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

joindre dans votre js réponse du serveur.cela a fonctionné pour moi.