Usar jQuery Fancybox (cuadro de diálogo de tipo de cuadro de luz) con enlaces cargados dinámicamente

Question

Estoy intentando vincular los enlaces de cuadro de fantasía para que cuando se creen los nuevos enlaces todavía funcione. He visto algunas otras preguntas aquí pero realmente no respondidas. Esto es lo que trato de hacer.

jQuery("a#[id^='domore_']").fancybox({ 
'autoDimensions' : false, 
'width'   : 'auto', 
'height'   : 'auto' 
}); 

Esto funciona bien, pero cuando la página o los enlaces son recargados por ajax no funciona. Intenté usar live() pero no pude hacerlo funcionar. ¿Cómo se vuelve a vincular o implementar en vivo en fancybox? Alguna forma de hacer esto? Gracias

Answer 1

personalmente uso jQuery's live function.

 
jQuery("a#[id^='domore_']").live('click', function(){ 
    jQuery.fancybox({ 
     'autoDimensions' : false, 
     'width'   : 'auto', 
     'height'   : 'auto', 
     'href'   : $(this).attr('href') 
    }); 
    return false; 
}); 

Nota: En realidad, no relacionado con su problema, pero se advirtió que jQuery 1.4.2 tiene un poco de un problema cuando se utiliza el evento de cambio en un selecto en IE pero 1.4.1 parece estar bien para ahora. (buscar el método "en vivo() para el evento 'cambio' roto en Jquery 1.4.2 para IE (trabajado en 1.4.1)" en Google, no puedo agregar el enlace ya que soy nuevo)

Espero que ayuda

Answer 2

Es probable que tenga que incluir la llamada de función faceybox en su método de éxito/devolución de llamada Ajax:

$.ajax({ 
    url: 'test.html', 
    success: function(data) { 
    $('.result') 
    .html(data) 
    .find("a#[id^='domore_']").fancybox({ 
     'autoDimensions' : false, 
     'width'   : 'auto', 
     'height'   : 'auto' 
    }); 
    } 
}); 

Answer 3

Puede usar esto. Me funcionó

$('.address').live('click', 
function(){     
    $(this).fancybox({ 
     'width'   : '40%', 
     'height'  : '70%', 
     'autoScale'  : false, 
     'transitionIn' : 'none', 
     'transitionOut' : 'none', 
     'type'   : 'iframe', 
     'onClosed'  : function() { 
      $("#basket").load("/order/basket"); 
     } 
    }).trigger("click"); 
    return false; 
});