Jquery action dans un div pour contrôler un autre avec load()

Question

J'ai une page d'index index.php, et quand l'utilisateur clique sur un projet (pour le plaisir de cette question, disons que le projet est contenu sur une page html appelée aeffect.html), il charge aeffect.html dans un div:

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

qui est contenu oncontained sur index.php.

Cependant, il existe de nombreux projets sur index.php, et chacun de ces projets a un bouton de fermeture. J'ai essayé d'utiliser cette variable pour vider popupContainer dans l'espoir qu'il le réinitialiserait à vide, et aeffect.html disparaîtraient.

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

Cela ne semble pas fonctionner, je ne suis pas sûr exactement comment faire ce travail. Y at-il un moyen de faire en sorte que l'action de aeffect.html peut contrôler la div sur index.php?

Voici la pleine jquery:

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

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

Voici le code html pour 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> 

et le code html pour 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

Le gestionnaire est $('a.close').click() étant ajouté à tous a.close éléments lorsque index.php charge. Cela signifie que le a.close dans le contenu chargé n'a pas le gestionnaire attaché. Attachez le gestionnaire après avoir chargé le nouveau contenu, ou utilisez $('a.close').live('click', ...) à la place.