Azione jquery all'interno di un div per controllarne un'altra con load ()

Question

Ho una pagina indice index.php e quando l'utente fa clic su un progetto (per motivi di questa domanda, diciamo che il progetto è contenuto in una pagina html chiamata aeffect .html ), carica aeffect.html in un div:

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

contenuto in index.php .

Tuttavia, ci sono molti progetti su index.php e ognuno di questi progetti ha un pulsante di chiusura. Ho provato a utilizzare questa variabile per svuotare popupContainer nella speranza che lo ripristinasse vuoto e aeffect.html scomparire.

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

Questo non sembra funzionare, non sono esattamente sicuro di come farlo funzionare. C'è un modo per farlo in modo che l'azione da aeffect.html possa controllare il div su index.php ?

Ecco il jquery completo:

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

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

Ecco l'html per 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>

e l'html per 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

Il gestore $ ('a.close'). click () viene aggiunto a tutti gli elementi a.close quando index.php carica . Ciò significa che a.close nel contenuto caricato non ha il gestore collegato.

Allega il gestore dopo aver caricato il nuovo contenuto o usa $ ('a.close'). live ('click', ...) invece.