Action Jquery dans une div pour en contrôler une autre avec load ()
Question
J'ai une page d'index index.php
, et lorsque l'utilisateur clique sur un projet (pour des raisons liées à cette question, disons que ce projet est contenu sur une page HTML appelée aeffect .html
), il charge aeffect.html
dans un div:
<div id="popupContainer"></div>
qui est contenu dans index.php
.
Cependant, il y a beaucoup de projets sur index.php
, et chacun de ces projets a un bouton de fermeture. J'ai essayé d'utiliser cette variable pour vider popupContainer
dans l'espoir de le réinitialiser à vide et aeffect.html
disparaîtrait.
//Close property
$("a.close").click(function(){
$("#popupContainer").empty();
});
Cela ne semble pas fonctionner, je ne sais pas trop comment le faire fonctionner. Y a-t-il un moyen de faire en sorte que l'action de aeffect.html
puisse contrôler la div sur index.php
?
Voici le jquery complet:
$(document).ready(function() {
//Find & Open
$(".projectThumb").click(function(){
$("#popupContainer").load("/aeffect.html");
});
//Close property
$("a.close").click(function(){
$("#popupContainer").empty();
});
});
Voici le code HTML pour 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>
et le code HTML pour 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>
La solution
Le gestionnaire $ ('a.close'). click ()
est ajouté à tous les éléments a.close
lorsque index.php
charge . Cela signifie que le gestionnaire n'a pas attaché le gestionnaire a.close
dans le contenu chargé.
Attachez le gestionnaire après le chargement du nouveau contenu ou utilisez $ ('a.close'). live ('cliquez', ...)
à la place.