Essayer de cacher () un élément avec jQuery

J'ai un code qui fait ceci:

$('.attachment-medium').each(function(){ $(this).click(function(){ var gallWidth = $('.gallery').width(); $('.gall-output').toggle().css('width', gallWidth); var url = $(this).attr('src').slice(0,-12) + '.jpg'; $('.gall-output-img').html('<img class="img-responsive" src="' + url + ' "/>'); var imgMeta = $(this).parent().next().html(); $('#gall-output-meta').html(imgMeta); }); }); 

Cela génère une superposition modale et affiche un img avec un div avec classe .gall-output. J'ai créé un petit <p class="gall-close">close</p> pour hide() le .gall-output mais il ne semble pas fonctionner avec ce code:

 $('.gall-close').click(function() { $('.gall-output').hide(); }); 

Existe-t-il une façon d'utiliser cette .gall-close pour masquer ou basculer .gall-output?

Merci de votre aide.

Dans le cas où le .gall-close est ajouté plus tard et non dans le dom lors de la chargement de la page, vous pouvez joindre l'événement de clic en utilisant event-delegation:

 $(document).on("click", ".gall-close", function(){ $('.gall-output').hide(); }); 

Au lieu de $(document) tout élément parent statique peut fonctionner comme élément de conteneur pour déléguer l'événement. Dans le cas où cela résoud votre problème, vous pouvez consulter https://api.jquery.com/on/#on-events-selector-data-handler , section "Événements directs et délégués":

"Les gestionnaires d'événements ne sont liés qu'aux éléments actuellement sélectionnés; ils doivent exister sur la page au moment où votre code effectue l'appel vers .on ()."