Действие Jquery внутри div для управления другим с помощью load ()

Question

У меня есть страница индекса index.php , и когда пользователь нажимает на проект (ради этого вопроса, допустим, что проект содержится на html-странице под названием aeffect .html ), он загружает aeffect.html в div:

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

который содержится в index.php .

Однако в index.php есть много проектов, и у каждого из этих проектов есть кнопка закрытия. Я пытался использовать эту переменную для очистки popupContainer в надежде, что она сбросит ее до пустой, и aeffect.html исчезнет.

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

Кажется, это не работает, я не совсем уверен, как заставить это работать. Есть ли способ сделать так, чтобы действие из aeffect.html могло управлять div в index.php ?

Вот полный JQuery:

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

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

Вот HTML-код для 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>

и html для 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

Обработчик $ ('a.close'). click () добавляется ко всем элементам a.close , когда index.php загружает . Это означает, что a.close в загруженном контенте не имеет обработчика.

Либо присоедините обработчик после загрузки нового содержимого, либо используйте вместо него $ ('a.close'). live ('click', ...) .