jQuery .append()

Question

Ceci est peut-être une façon inélégante de le faire mais ... Je fais mon propre script de fenêtre lightbox avec jQuery - pour apprendre plus que tout autre chose.

En utilisant ce script:

$(document).ready(function() { 
    $(".popout").hide(); 
    $(".modal-links a").each(function(i){ 
     $(this).click(function(){ 
     $("body").append('<div class="overlay"></div>') 
     $(".popout").append('<a class="close" href="#">Close</a>') 
     var modal = $(".popout").eq(i), 
      modalWidth = modal.width(), 
      modalHeight = modal.height(); 
     modal.css({ 
      "width":modalWidth, 
      "height":modalHeight, 
      "margin-left":-(modalWidth/2)}) 
      .show().siblings(".popout").hide(); 
     }); 
    }); 
    $(".close").click(function(){ 
     $(".popout").hide(); 
     $(".overlay").hide(); 
    }); 
}); 

Je suis en mesure d'ajouter des liens d'ancrage avec une classe de .close. Cela fonctionne, quand je regarde la source, il est mis dans le balisage comme je le voudrais. Toutefois, dans la fonction suivante, j'essaie de cibler cette classe ajoutée et d'utiliser un événement click pour déclencher le masquage de la fenêtre modale et sa superposition en arrière-plan. Cela ne fonctionne pas. Pourtant, si je ne fais que copier le balisage a class="close" dans mon balisage réel (sans JS), il se ferme quand on clique dessus. Des idées?

Answer 1

On dirait que vous devez utiliser la méthode .live(). Étant donné que votre ancre avec la classe close est créée uniquement après l'apparition de click sur une ancre modal-links, jQuery ne peut pas la connecter à l'événement document.ready.

Édition, correction: La méthode .live contourne ce problème en attachant un événement à la racine de l'arborescence DOM qui vérifie si l'élément cible correspond aux sélecteurs donnés, puis exécute la fonction appropriée.

$('.close').live('click', function() { 
     $(".popout").hide(); 
     $(".overlay").hide(); 
}); 

Answer 2

vous devez soit ajouter votre gestionnaire de clic lorsque vous créez le lien étroit, ou déléguer le gestionnaire de clic en fonction live de clic.

En ce moment, votre sélecteur $('.close').click(... ne sélectionne aucun élément car le lien n'existe pas encore.

EDIT pour ajouter:

Un correctif serait de changer pour $('.close').live('click', function...

Les éléments sont ajoutés de manière asynchrone.