Jquery Aktion innerhalb eines div mit Last einen anderen zu steuern ()
Frage
Ich habe eine Indexseite index.php
, und wenn der Benutzer an einem Projekt klickt (für die Zwecke dieser Frage, sagen wir mal, dass Projekt auf einer HTML-Seite namens aeffect.html
enthalten ist), es lädt aeffect.html
in ein div:
<div id="popupContainer"></div>
, die oncontained auf index.php
enthalten ist.
Es gibt jedoch viele Projekte auf index.php
, und jedes dieser Projekte hat eine Schließen-Schaltfläche. Ich habe versucht, diese Variable zu verwenden popupContainer
in der Hoffnung zu leeren, dass es zurückgesetzt es zu leeren, und aeffect.html
würde verschwinden.
//Close property
$("a.close").click(function(){
$("#popupContainer").empty();
});
Dies scheint nicht zu arbeiten, ich bin nicht ganz sicher, wie diese Arbeit zu machen. Gibt es eine Möglichkeit, es zu machen, so dass die Aktion von aeffect.html
die div auf index.php
steuern kann?
Hier ist die vollständige jquery:
$(document).ready(function() {
//Find & Open
$(".projectThumb").click(function(){
$("#popupContainer").load("/aeffect.html");
});
//Close property
$("a.close").click(function(){
$("#popupContainer").empty();
});
});
Hier ist der HTML-Code für 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>
und die html für 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>
Lösung
Der $('a.close').click()
Handler wird an alle a.close
hinzugefügt Elemente , wenn index.php
Lasten . Dies bedeutet, dass die a.close
im geladenen Inhalt nicht der Handler angebracht haben.
Sie entweder den Handler anhängen nach dem neuen Inhalt zu laden, oder verwenden Sie $('a.close').live('click', ...)
statt.