0

特定の REL タグを持つすべてのリンクをハイジャックするスクリプトがあり、サイトの JS バージョンのメイン コンテンツ エリアを更新します。問題は、コンテンツ フレーム (div) にロードされたページが、一致する REL を持っていてもコードを実行しない独自の JS ファイルにある場合です。これらのページにスクリプトを添付すると、このスクリプトが見つかった回数だけこのスクリプトが実行されるというバグが発生しました。したがって、コンテンツ リンクの 3 ページを通過した場合、これは 3 回実行されます。5 ページは 5 回の実行に相当します。これに半日を費やしましたが、もっとうまくできることを本当に知りたいです。

これは、リンクをハイジャックするために使用しようとしているもののスニペットです。

$("a[rel='linkMain']").click(function() {

    var link = $(this).attr("href");
    priFrame(link, 'main', 'true');
    return false;

});

これが私の priFrame のスニペットです。データをロードしようとしている方法がわかります。

function priFrame(page, frame){

        $('#'+frame+'frame').load('/'+page).hide(0).scrollTop(0).fadeIn(1000);
        $("html, body").animate({ scrollTop: 0 }, 600);
        window.history.pushState(null, page, page);

}
4

2 に答える 2

1

これは、イベント委任の良い例です。代わりにこれを試してください (注: このスクリプトは、動的にナビゲートされる各ページではなく、ページ全体に対して 1 回含める必要があります):

$(document).on("click", "a[rel='linkMain']", function() {
    var link = $(this).attr("href");
    priFrame(link, 'main', 'true');
    return false;
});

以前に見られた動作の理由は次のとおりです。

ページにスクリプトを一度だけ配置すると、ページa[rel='linkMain']に既に存在するすべての要素にクリック ハンドラーがバインドされます。a[rel='linkMain']ただし、ページに新しい要素を動的に追加すると、それらの新しい要素もバインドされませんでした。

動的に読み込まれた各ページにコードを挿入すると、a[rel='linkMain']以前にクリック イベント ハンドラーがバインドされていた要素に新しいハンドラーをバインドしていました。

クリック ハンドラーはdocument1 回だけバインドされるため、イベント委任は機能します。イベントが発生するたびに、clickイベントがa[rel='linkMain']要素から発生したことを確認してから、ハンドラーをトリガーします。a[rel='linkMain']これにより、要素にイベント ハンドラーがバインドされている/バインドされていない要素をタップし続けることなく、ページから要素を動的に追加/削除できます。

于 2013-04-01T20:18:42.793 に答える
1

@jmarrは私を打ち負かしました:P

$("body").on('click', "a[rel='linkMain']", function() {

    var link = $(this).attr("href");
    priFrame(link, 'main', 'true');
    return false;

});
于 2013-04-01T20:19:38.187 に答える