Action Jquery dans une div pour en contrôler une autre avec load ()

Question

J'ai une page d'index index.php , et lorsque l'utilisateur clique sur un projet (pour des raisons liées à cette question, disons que ce 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 dans index.php .

Cependant, il y a beaucoup de 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 de le réinitialiser à vide et aeffect.html disparaîtrait.

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

Cela ne semble pas fonctionner, je ne sais pas trop comment le faire fonctionner. Y a-t-il un moyen de faire en sorte que l'action de aeffect.html puisse contrôler la div sur index.php ?

Voici le jquery complet:

$(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 $ ('a.close'). click () est ajouté à tous les éléments a.close lorsque index.php charge . Cela signifie que le gestionnaire n'a pas attaché le gestionnaire a.close dans le contenu chargé.

Attachez le gestionnaire après le chargement du nouveau contenu ou utilisez $ ('a.close'). live ('cliquez', ...) à la place.