Utilisez jQuery Fancybox (boîte de dialogue de type lightbox) avec des liens chargés dynamiquement

Question

J'essaye de lier des liens de boîte fantaisie de sorte que lorsque les nouveaux liens sont créés, cela fonctionnera toujours. J'ai vu quelques autres questions ici mais pas vraiment répondu. C'est ce que j'essaie de faire.

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

Cela fonctionne très bien mais lorsque la page ou les liens sont rechargés par ajax, cela ne fonctionne pas. J'ai essayé d'utiliser live() mais je n'ai pas réussi à le faire fonctionner. Comment relier ou implémenter en direct sur fancybox? Tout moyen de le faire? Merci

Answer 1

J'utilise personnellement 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; 
}); 

Note: Pas vraiment lié à votre question, mais soyez averti que jQuery 1.4.2 a un peu d'un problème lors de l'utilisation de l'événement de changement sur une sélection dans IE mais 1.4.1 semble être très bien pour à présent. (recherche "live() méthode pour 'changement' événement cassé dans Jquery 1.4.2 pour IE (travaillé dans 1.4.1)" sur Google, je ne peux pas ajouter le lien que je suis nouveau)

Espérons qu'il aide

Answer 2

Vous aurez probablement inclure l'appel de la fonction faceybox dans votre méthode succès/rappel ajax:

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

Answer 3

Vous pouvez l'utiliser. Cela a fonctionné pour moi

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