jQuery appelant l'élément div qui a été chargé par ajax, ou inséré via la méthode html()

Question

C'est mon premier message sur stackoverflow. J'ai cherché des questions similaires ici et j'ai trouvé quelques réponses, mais je n'ai pas vraiment trouvé de solution à ce problème particulier qui pourrait m'aider.

J'ai une page Web qui charge le contenu principal par ajax. Tout simplement comme ceci:

function loadContent(content) { 

if(localStorage.content != content) { 
    $("#content #content_loading").css("display", "block"); 
} 

var userID = Cookies.get("UserID"); 

$.ajax({      
    url: '../game/data/load_content.php',  
    type: 'post', 
    data : { ID : userID, Content : content },     
    success: function(response) { 
     $("#content #content_loading").css("display", "none"); 
     $("#content #import").html(response); 
     localStorage.content = content; 
     $("#header").html("<div class='header_text'>"+content+"</div>"); 
     } 
}); } 

Il charge d'autres fonctions ajax, html et css. Depuis que j'ai des milliers et des milliers de lignes de code, les choses deviennent plus compliquées. Maintenant, je veux simplement créer un bouton «fermer» universel pour les fenêtres popup. Toutes les fenêtres popup sont dans une boîte, et le bouton de fermeture est à l'intérieur de l'en-tête de la boîte. Maintenant, je veux fermer toutes les fenêtres pop-up avec une seule fonction:

$('.close').click(function() { 
    $(this).parent().parent().fadeOut(); 
}); 

Ce parent choisit simplement de l'élément proche, qui est en-tête, puis la mère de ce parent qui est toute la boîte. L'une des fonctions de pop-up ressemble à ceci:

function showPopup(header, content) { 
    $("#popup_header").html(header+"<div class='close'></div>"); 
    $("#popup_content").html(content); 
    $("#popup").fadeIn(300); 
} 

Cette fonction est incluse dans le document principal (<script src="script"></script>).

L'autre pop-up est directement chargé sur la fonction LoadContent (contenu), il est donc chargé avec appel ajax. Et il est tout simplement HTML qui ressemble à ceci:

<div id="nearby_players"> 
    <div class="header">PLAYERS NEARBY <div class="close"></div></div> 
     <ul> </ul> 
</div> 

Maintenant, si j'insère la fonction « fermer » sur clic dans le document ajax chargement il fonctionnera. Et si je change la fonction loadPopup() à ceci:

function showPopup(header, content) { 
    $("#popup_header").html(header+"<div class='close'></div>"); 
    $("#popup_content").html(content); 
    $("#popup").fadeIn(300); 
     $(".close").click(function() { 
      $(this).parent().parent().fadeOut(); 
     }); 
} 

Cela fonctionne aussi. Mais ce que je veux faire est de créer une fonction de simple clic attachée au document principal qui fermera tous les popups possibles qui sont chargés sur la page Web ou sont déjà sur la page Web. Je pensais que c'était un problème puisque l'élément 'proche' était une pièce d'identité et non une classe. Et comme ça devrait être unique, je l'ai changé en classe. Donc, ma question est. Comment puis-je faire référence à tous les éléments avec la classe 'close', qu'ils soient chargés avec ajax, et ensuite dans cet ajax ils sont chargés à nouveau avec un autre ajax et ainsi de suite. Et aussi les popups qui sont déjà insérés dans le document lorsque la page web est chargée?

Comment puis-je ajouter ces éléments au DOM si jQuery trouve réellement?

Cordialement, Hazes!

Answer 1

Vous créez des éléments dynamiquement, ce qui signifie que les événements ne sont pas attachés. S'il vous plaît lire comment attacher des événements aux éléments créés dynamiquement: http://api.jquery.com/live/