javascript - pagina - colorbox(que usa en vivo) sin volver a enlazar después de la llamada jQuery ajax

enviar json por post jquery

Question

Tengo una lista de elementos que estoy cargando a través de ajax (usando jQuery''s .load ()). Cada uno de estos elementos tiene un enlace (editar) al lado que lightboxes (usando colorbox) una pequeña forma de edición. Cuando el lightbox está cerrado, utilizo la devolución de llamada onClosed para volver a cargar la lista ajax para mostrar y los cambios realizados durante la edición.

La llamada de colorbox se ve así:

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

Mi lista se ve así:

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

Miré el código fuente del colorbox y vi que se usa jquery live() para hacer el enlace. Aquí 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;
  }
});

Puedes ver más arriba de la forma en que funciona el cuadro de color al vincularlo a "boxElement", que es una clase que crea llamada "cboxElement". Antes de que live () enlace colorbox agrega esta clase (cboxElement) a todos los elementos que coinciden con el selector (.colorbox en mi ejemplo), luego se une a esta nueva clase.

Así que pensé que si colocaba el enlace de colorbox fuera del contenido ajaxed, se uniría a los enlaces después de reemplazar el div #featureList con ajax, ya que se supone que live () se unirá a los elementos "ahora o en el futuro". Pero no funciona porque es vinculante para .cboxElement en lugar de .colorbox, por lo que cuando ajax reloads colorbox no vuelve a agregar la clase .cboxElement a los elementos.

Intenté llamar a $ .fn.colorbox.init () en el contenido de ajax para que colorbox volviera a agregar la clase .cboxElement a los elementos, pero esto no tuvo ningún efecto. (Hago algo así cuando trato con shadowbox, pero parece que no funciona igual para colorbox).

Entonces traté de colocar todo el código del colorbox dentro del contenido de Ajax. Cuando hago esto, el colorbox binds está apilando / encadenando. Así que la segunda vez que lo llamo obtengo dos cajas de color (y tengo que presionar el botón "cerrar" dos veces para volver a la pantalla principal). La tercera vez tengo tres. Esto se debe a que cuando vuelvo a llamar a colorbox, agrega la clase .cboxElement, haciendo que old live () vuelva a estar activo, y también agrega OTRA VIDA () a él. Intenté borrar los enlaces .live () llamando a .die () primero, pero no funcionó por algún motivo.

He encontrado un par de publicaciones relacionadas, pero ninguna resolvió este problema porque colorbox ya está usando live ():
Problema con jQuery Colorbox
jQuery AJAX tabla a una página pero ahora las superposiciones colorbox ya no funcionan

¿Alguna otra idea por ahí? Estoy realmente perplejo. Siento que debería cambiar a una caja de luz diferente, pero en general me gusta el colorbox y funcionó muy bien en todas partes en el sitio hasta que surgió este problema ajax.

¡¡¡Gracias!!!

EDITAR:

Entonces, en este caso mi problema era que mi framework ( Yii ) incluía un script de colorbox duplicado en cada llamada AJAX, lo que estaba causando el problema. ¡Así que ten cuidado con eso!

Para todos los que tienen problemas que NO enfrentan el problema del script duplicado, yo estaba: @Relic señala a continuación que puede "esquivar" algunos problemas haciendo su propio jQuery delegate () bind que hace una "llamada directa" de colorbox, en su lugar de confiar en el enlace live() predeterminado de colorbox. Lo modificaría así para mi caso:

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

Answer 1

Lo resolví de una manera bastante fácil.

Si está enviando una respuesta ajax (generalmente una respuesta de javascript), adjunte el código de enlace de colorbox normal (como lo haría en cualquier lugar) en esa respuesta.

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

adjunte esto en su respuesta js del servidor. esto funcionó para mí.

Answer 2

El problema parece estar relacionado con algo que no noté al principio y, por lo tanto, no formulé mi pregunta. He editado la pregunta para reflejar esta nueva información.

Mi problema era que la respuesta de AJAX tenía múltiples enlaces e incluía el script de colorbox varias veces. El widget de ayuda de Yii Framework que estaba usando para incluir el script también incluye jQuery y Colorbox en la respuesta CADA VEZ. Yii no tiene una forma de determinar si los scripts necesarios (como jQuery) ya se han incluido en la página principal (problema de HTTP sin estado típico) por lo que lo incluye en el procesamiento parcial de AJAX cada vez.

Resolví este problema al no usar un widget Yii para hacer el enlace de Colorbox en la vista de renderPartial cada llamada Ajax. Solo incluyo el enlace de colorbox en la página principal , por lo que el contenido de Ajax no tiene JS.

Answer 3

En primer lugar, no debe usar .live() está en desuso. En su lugar aprende cómo usar .delegate() Encontrarás que este es un oyente mucho más poderoso y te ayudará a resolver tu problema.

En la carga de la página, inicialmente el DOM está listo y el colorbox se inicia para el selector AJAX llama a una nueva parte de la página con algún elemento DOM que está en la lista de selector de colorbox, pero no se nota porque se cargó en la página después del selector fue leído por el javascript.

Pruebe lo siguiente, ya que observa el body #main para todos, existentes y nuevos 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 para ".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í, es un gran cambio, lo sé, pero el punto es que el método ''on'' también se puede usar como ''bind'', así que es genial.