div中的Jquery动作用load（）控制另一个

Question

我有一个索引页 index.php ，当用户点击一个项目时（为了这个问题，我们可以说项目包含在名为 aeffect的html页面上.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 中的操作可以控制 index.php 上的div？

这是完整的jquery：

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

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

这是index.php

的html

<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>

和aeffect.html的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

当 index.php时， $（'a.close'）。click（）处理程序被添加到所有 a.close 元素 加载。这意味着加载内容中的 a.close 没有附加处理程序。

在加载新内容后附加处理程序，或使用 $（'a.close'）。live（'click'，...）。