1

HTML5 を使用する CMS を作成したいと考えています。インデックスが実行されると、ヘッダー、コンテナー、フッターが読み込まれます。これを行うには、次のコードを使用します

$('#header').load("header.html");
$('#container').load("container.html");
$('#footer').load("footer.html)");

それは機能しますが、ヘッダー、コンテナー、またはフッターに関係なく、もちろん、ヘッダー、コンテナーのタグごとに $('a').click(...) のような同じハンドラーにいくつかのイベントハンドラーをバインドしたいと思います、およびフッター。もちろん、ローダーごとに 3 つの成功関数をバインドすることもできますが、それは良い方法ではないと思います。すべてのロード イベントが終了したかどうかを確認する方法はありますか?

4

1 に答える 1

0

これにアプローチするには、いくつかの方法があります。

コンテナーへの委任

これは、これまでで最も簡単なアプローチです。コンテナー内の既存または将来の<a>タグは、指定されたクリック ハンドラーの機能を実現します。

$(function(){
    $('#header, #container, #footer').on('click', 'a', function() {
        //...
    });

    $('#header').load("header.html");
    $('#container').load("container.html");
    $('#footer').load("footer.html");
});

いずれかのアクションが失敗しても、.load()他のアクションには影響しません。

名前付き関数

このアプローチでは、同じ名前の関数が 3 つの.load()呼び出しすべての「完了」コールバックとして指定されます。

$(function() {
    function bindHandler() {
        $(this).find("a").on('click', function() {
            //...
        });
    }

    $('#header').load("header.html", bindHandler);
    $('#container').load("container.html", bindHandler);
    $('#footer').load("footer.html", bindHandler);
});

繰り返しますが、いずれかの.load()アクションが失敗しても、他のアクションには影響しません。

.when(約束).done()

このアプローチで.load()は、 は に置き換えられ$.ajax、非常に便利な 'jqXHR' (約束) オブジェクトを返します。.load()標準の jQuery オブジェクトを返すため、この方法では使用できません。promise オブジェクトにアクセスできません。

function load(url, selector) {
    //make ajax request and return jqXHR (promise) object
    return $.ajax(url, {
        success: function(data){
            $(selector).html(data);
        }
    });
}

$.when(
    load("header.html", '#header'),
    load("container.html", '#container'),
    load("footer.html)", '#footer')
).done(function() {
    // All three ajax requests have successfully completed
    $("#header, #container, #footer").find("a").on('click', function() {
        //...
    });
});

この最後の方法は、3 つの読み込みアクションがすべて成功したときにクリック ハンドラーを配置する場合にのみ使用してください。アクションのいずれかが失敗.load()すると、クリック ハンドラーのアタッチが完全に禁止されます。

于 2012-07-16T04:44:09.690 に答える