jQuery calling div element that has been loaded by ajax, or inserted via html() method

Question

It's my first post on stackoverflow. I've searched similiar questions here and found a couple of answers but couldn't really find a solution to this particular problem that would help me.

I have a webpage which loads main contents by ajax. Simply like this:

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>");
      } 
}); }

It loads other ajax functions, html and css. Since I have thousands and thousands lines of code simple things get trickier. Now I simply want to create an universal 'close' button for popup windows. All of the popup windows are in a box, and the close button is inside the box header. Now I want to close all popup windows with a single function:

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

This simply selects the parent of the close element, which is header and then parent of that parent which is the whole box. One of the popup functions looks like this:

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

This function is included in the main document ( <script src="script"></script> ).

Then the other popup is directly loaded upon loadContent(content) function, so it's loaded with ajax call. And it's simply HTML that looks like this:

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

Now if I insert the 'close' function upon click in the document that ajax is loading it will work. And if I change the loadPopup() function to this:

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

It works too. But what I want to do is to create a single click function attached to the main document that will close all the possible popups that are being loaded on the webpage or already are on the webpage. I thought it was a problem since 'close' element was an ID not a class. And since it should be unique I've changed it to class. So my question is. How do I refer to all of the elements with class 'close' whether they are being loaded with ajax, and then within that ajax they get loaded again with another ajax and so on. And also the popups that are already inserted into document when the webpage gets loaded?

How do I add these elements to the DOM so jQuery actually finds it?

Regards, Hazes!

Answer 1

You create elements dynamically, which means that events are not attached to them. Please read how to attach events to dynamically created elements: http://api.jquery.com/live/