Действие Jquery внутри div для управления другим с помощью load ()
Вопрос
У меня есть страница индекса 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 ×</a>
<img src="/img/aeffect_popup.jpg" width="500" height="729" alt="" />
<p class="description">Description</p>
</div>
Решение
Обработчик $ ('a.close'). click ()
добавляется ко всем элементам a.close
, когда index.php
загружает . Это означает, что a.close
в загруженном контенте не имеет обработчика.
Либо присоедините обработчик после загрузки нового содержимого, либо используйте вместо него $ ('a.close'). live ('click', ...)
.