load（）で別のdivを制御するJQueryアクション

StackOverflow https://stackoverflow.com/questions/1402121

  •  05-07-2019
  •  | 
  •  

質問

インデックスページ 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 &times;</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'、...）を使用します。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top