Jquery action within a div to control another with load()

Question

Hey Guys,

I have an index page index.php, and when the user clicks on a project (for the sake of this question, lets say that project is contained on an html page called aeffect.html), it loads aeffect.html into a div:

<div id="popupContainer"></div>

which is contained oncontained on index.php.

However, there are many projects on index.php, and each of these projects has a close button. I tried to use this variable to empty out popupContainer in hopes that it would reset it to empty, and aeffect.html would dissappear.

//Close property
$("a.close").click(function(){
    $("#popupContainer").empty();
});

This doesn't seem to work, I am not exactly sure how to make this work. Is there a way to make it so that the action from aeffect.html can control the div on index.php?

Here is the full jquery:

$(document).ready(function() {
//Find & Open
$(".projectThumb").click(function(){
        $("#popupContainer").load("/aeffect.html");
            });

//Close property
$("a.close").click(function(){
 $("#popupContainer").empty();
  });
});

Here is the html for index.php

<div id="container">
    <div class="projectThumb">
    <img src="/img/aeffect_button_static.gif" width="146" height="199" class="button" name="aeffect" alt="" />
    <p class="title">A.EFFECT: Film Poster</p>
    </div>
</div>
<div id="popupContainer"></div>

and the html for aeffect.html

<div class="projectPopup" id="aeffect">
    <a class="close">Close &times;</a>
    <img src="/img/aeffect_popup.jpg" width="500" height="729" alt="" />
    <p class="description">Description</p>
</div>

Answer 1

The $('a.close').click() handler is being added to all a.close elements when index.php loads. This means that the a.close in the loaded content does not have the handler attached.

Either attach the handler after loading the new content, or use $('a.close').live('click', ...) instead.