javascript - open - cómo vincular fancybox a un elemento dinámico añadido?

fancybox youtube

Question

Yo uso jquery fancybox 1.3.4 como forma pop.

pero encontré que fancybox no puede unirse a la dinámica de elementos añadida. por ejemplo, cuando agrego un elemento html al documento actual.

así: primero añado un elemento al uso del cuerpo jquery,

  $(document.body).append("<a href="home/index" class="fancybox"/>");

y llamo fancybox,

  $(".ajaxFancyBox").fancybox({padding: 0});

pero fancybox no funciona con un elemento dinámico agregado.

y no puedo llamar a fancybox desde este elemento?

vengo de China. entonces mi inglés es pobre, por favor, perdónenme.

Answer 1

Está especificando el nombre de clase incorrecto, intente esto en su lugar:

$(".fancybox").fancybox({padding: 0});

Answer 2

Podría intentar algo como esto tal vez:

 $(document.body).append("<a href=''home/index'' class=''fancybox'' onclick=''showFancybox()''/>");

Y luego crea una función para crear y mostrar Fancybox:

function showFancybox(){
    $.fancybox(
            ''<h2>Hi!</h2><p>Content of popup</p>'',
            {
                    ''autoDimensions''    : false,
                ''width''             : 350,
                ''height''            : ''auto'',
                ''transitionIn''      : ''none'',
                ''transitionOut''     : ''none''
            }
        );
}

Answer 3

La forma más fácil de enlazar fancybox (v1.3.x) a elementos añadidos dinámicamente es:

1: Actualice a jQuery v1.7.x (si aún no lo ha hecho)

2: Configure su script usando jQuery API on() + el evento focusin .

Para hacerlo funcionar, necesitas encontrar el elemento parent de tus elementos con class="ajaxFancyBox" según tu código anterior (o el parent del parent como lo necesites) y adjuntar jQuery on() a él, así que por ejemplo, teniendo este html:

<div id="container">
 <a class="ajaxFancyBox" href="image01.jpg">open image 01</a>
 <a class="ajaxFancyBox" href="image02.jpg">open image 02</a>
</div>

.. aplicaremos on() y focusin event al elemento con id="container" (el parent ) como en el ejemplo anterior, como:

$("#container").on("focusin", function(){
 $("a.ajaxFancyBox").fancybox({
  // fancybox API options here
  ''padding'': 0
 }); // fancybox
}); // on

Puede aplicar cualquier opción de fancybox cuando lo necesite. Además, puede tener diferentes scripts para diferentes tipos de contenido (dentro del método on() ) como:

$("#container").on("focusin", function(){
 $("a.ajaxFancyBox").fancybox({
  // fancybox API options here
  ''padding'': 0
 }); // fancybox
 $("a.iframeFancyBox").fancybox({
  // fancybox API options here
  ''padding'': 0,
  ''width'': 640,
  ''height'': 320,
  ''type'': ''iframe''
 }); // fancybox
}); // on

IMPORTANTE : el ejemplo anterior no funcionará así en Chrome. La solución es agregar el atributo tabindex a todos sus elementos vinculados a fancybox como

<div id="container">
 <a tabindex="1" class="ajaxFancyBox" href="image01.jpg">open image 01</a>
 <a tabindex="1" class="ajaxFancyBox" href="image02.jpg">open image 02</a>
</div>

eso resuelve el problema y funcionará (hasta donde yo sé) en la mayoría de los navegadores, incluido IE7 +.

Ver mi página de demostración aquí

ACTUALIZACIÓN: 07 de marzo de 2012.

Me dijeron que este método solo funciona cuando agrega contenido nuevo a la página, pero no cuando reemplaza el contenido de la página.

El método realmente funciona en cualquiera de los dos escenarios mencionados anteriormente. Solo asegúrese de que el nuevo contenido de reemplazo también esté cargado dentro del contenedor donde aplicó el método .on() .

Ver demostración

La solución alternativa de tabindex para Chrome también se aplica.

Answer 4

Como se sugiere en el comentario anterior, podemos usar el siguiente enfoque en este tipo de problemas (elemento vinculante para elementos dinámicos) -

$("#container").on("focusin", function(){

    if($(this).hasClass("fancybox-bind")){                //check if custom class exist 
       return 0;                                          //now fancybox event will not be binded
    }else{                                                //add class to container
        $(this).addClass("fancybox-bind");
    }

    $("a.ajaxFancyBox").fancybox({                        // fancybox API options here
        ''padding'': 0
    }); // fancybox

   $("a.iframeFancyBox").fancybox({                       // fancybox API options here
     ''padding'': 0,
     ''width'': 640,
     ''height'': 320,
     ''type'': ''iframe''
   }); // fancybox
}); // on

Answer 5

Respondí la misma pregunta de esta manera, puedes encontrar la respuesta en

Adjuntar html generado dinámicamente utilizando jQuery no funciona bien con Fancybox