load()で別のdivを制御するJQueryアクション
質問
インデックスページ index.php
があり、ユーザーがプロジェクトをクリックすると(この質問のために、プロジェクトが aeffectというhtmlページに含まれているとしましょう。 .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
のアクションが index.php
のdivを制御できるようにする方法はありますか?
完全なjqueryは次のとおりです。
$(document).ready(function() {
//Find & Open
$(".projectThumb").click(function(){
$("#popupContainer").load("/aeffect.html");
});
//Close property
$("a.close").click(function(){
$("#popupContainer").empty();
});
});
index.phpのhtmlです
<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>
およびaeffect.htmlの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>
解決
index.phpの場合、すべての
が読み込まれます。これは、ロードされたコンテンツの a.close
要素に $( 'a.close')。click()
ハンドラーが追加されます。 a.close
にハンドラーが添付されていないことを意味します。
新しいコンテンツをロードした後にハンドラーをアタッチするか、代わりに $( 'a.close')。live( 'click'、...)
を使用します。
所属していません StackOverflow