0

私は問題を抱えています。子ページをロードし、サブフォームでトリガーされるカスタム イベントを記録するスクリプトを含むページがあります。

----デフォルト.aspx----

<body>
<input type="button" class="clickable" value="Load child doc" />
<hr />
<div id="container"></div>
</body>

<script>
var clickHandler = function () {
    $.ajax("Subform.aspx", {
        method: "GET",
        success: function (data) {
            $('#container').html(data);
        }
    });
}

$(function () {
    $('body').on('click', clickHandler);

    $('body').on("dataLoaded", function (param) {
        console.info("Custom event triggered", param);
    })
});

----Subform.aspx には、カスタム イベント "dataLoaded" をトリガーするスクリプトがあります ----

<html>
<header>
    <script src="scripts/jquery-1.7.1.js"></script> 
</header>
<body>
..context of Subform...
<script>
        $(function () {
            $('body').trigger("dataLoaded", { key: "value from sub form" });
            console.log("ChildPage loaded. dataLoaded event triggered")
        })
    </script>
 .....
 </body>
 </html>

問題は、サブフォームがコンテナーにロードされた後 (および ajax でロードされたファイルでトリガーされたドキュメントの準備ができている - メッセージ「childPage loaded ..」が表示される)、カスタム イベント "dataLoaded" がトリガーされたが、ハンドラーが 1 回だけ呼び出されたことです。他のすべての ajax 呼び出しは、サブフォームのコンテキストを読み込み、テキスト「ChildPage がロードされました。dataLoaded イベントがトリガーされました」がログに記録され、イベント「dataLoaded」がトリガーされましたが、カスタム イベントのイベント ハンドラーはもう呼び出されません。子ページがロードされてカスタムイベントがトリガーされるたびに、そのハンドラーが呼び出されることを期待しています。

4

1 に答える 1

0

問題/解決策が見つかりました。Subform.aspx は、ヘッダーに JQuery スクリプト参照タグを含む HTML ページでした。サブフォームが親の #container div に読み込まれると、サブフォームが jQuery をリロードし、ハンドラが失われました。

解決策は簡単でした.subform.aspxで<script>タグと、本文、html、ヘッダーなど、メインドキュメントを無効にする可能性のある他のすべてのタグを削除します。内容だけ残して、なんかこんな感じに

<div>
SubForm
    Ajax response....
<script>
    $(function() {
        debugger;
        $('#container').trigger("dataLoaded", { key: "value from sub form" });
        console.log("ChildPage loaded. dataLoaded event triggered");
    });
</script>

この変更後、動的に読み込まれたページでトリガーされたカスタム イベントが処理されました。

于 2016-01-31T02:34:54.767 に答える