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 &times;</a>
    <img src="/img/aeffect_popup.jpg" width="500" height="729" alt="" />
    <p class="description">Description</p>
</div>
Foi útil?

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.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top