Jquery action within a div to control another with load()
Question
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 ×</a>
<img src="/img/aeffect_popup.jpg" width="500" height="729" alt="" />
<p class="description">Description</p>
</div>
Solution
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.