これにアプローチするには、いくつかの方法があります。
コンテナーへの委任
これは、これまでで最も簡単なアプローチです。コンテナー内の既存または将来の<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()
すると、クリック ハンドラーのアタッチが完全に禁止されます。