Acción jquery dentro de un div para controlar a otro con load ()

Question

Tengo un índice index.php , y cuando el usuario hace clic en un proyecto (por el bien de esta pregunta, digamos que el proyecto se encuentra en una página html llamada aeffect .html ), carga aeffect.html en un div:

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

que se incluye en index.php .

Sin embargo, hay muchos proyectos en index.php , y cada uno de estos proyectos tiene un botón de cierre. Intenté usar esta variable para vaciar popupContainer con la esperanza de que se reiniciara, y aeffect.html desaparecería.

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

Esto no parece funcionar, no estoy muy seguro de cómo hacer que esto funcione. ¿Hay alguna forma de hacerlo de manera que la acción de aeffect.html pueda controlar la división en index.php ?

Aquí está el jquery completo:

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

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

Aquí está el html para 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>

y el html para 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

El controlador $ ('a.close'). click () se está agregando a todos los elementos a.close cuando index.php cargas . Esto significa que el a.close en el contenido cargado no tiene el controlador adjunto.

Adjunte el controlador después de cargar el nuevo contenido, o use $ ('a.close'). live ('click', ...) en su lugar.