ação jquery dentro de uma div para controlar outro com carga ()
Pergunta
Eu tenho um index.php
página do índice, e quando o usuário clica em um projeto (por causa desta questão, vamos dizer que o projeto está contido em uma página html chamada aeffect.html
), ele carrega aeffect.html
em uma div:
<div id="popupContainer"></div>
que está contida oncontained em index.php
.
No entanto, existem muitos projetos em index.php
, e cada um desses projetos tem um botão de fechar. Eu tentei usar essa variável para esvaziar popupContainer
na esperança de que ele iria redefini-la para esvaziar e aeffect.html
iria desaparecer.
//Close property
$("a.close").click(function(){
$("#popupContainer").empty();
});
Este não parece trabalho, eu não sou exatamente certo como fazer este trabalho. Existe uma maneira de fazer com que a ação de aeffect.html
pode controlar o div em index.php
?
Aqui está o jquery completo:
$(document).ready(function() {
//Find & Open
$(".projectThumb").click(function(){
$("#popupContainer").load("/aeffect.html");
});
//Close property
$("a.close").click(function(){
$("#popupContainer").empty();
});
});
Aqui está o 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>
eo html para 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>
Solução
O manipulador $('a.close').click()
está sendo adicionado a todos os elementos a.close
quando as cargas index.php
. Isto significa que o a.close
no conteúdo carregado não tem o manipulador de anexo.
De qualquer anexar o manipulador depois de carregar o novo conteúdo, ou uso $('a.close').live('click', ...)
vez.