2015年3月16日 – 端くれプログラマの備忘録

HTMLを読み込み、DOMに挿入する。

load( url, data, callback )

1	load( url, data, callback )

サンプルコード

<button>Read More</button>
<div id="result"></div>

1 2	<button>Read More</button> <div id="result"></div>

$('button').click(function() {
 $('#result').load('more.html');
});

$('button').click(function() {

$('#result').load('more.html');

});

more.html

<div id="message">hello</div>

1	<div id="message">hello</div>

動的に読み込んだmore.htmlの内容を操作するにはコールバック関数を使うこと。more.htmlは非同期に読み込まれるので注意。

誤り

$('button').click(function() {
    $('#result').load('more.html');
    $('#message').css('color','red');
});

$('button').click(function() {

$('#result').load('more.html');

$('#message').css('color','red');

});

正解

$('button').click(function() {
    $('#result').load('more.html', function() {
        $('#message').css('color','red');
    });
});

$('button').click(function() {

$('#result').load('more.html', function() {

$('#message').css('color','red');

});

load( url, data, callback ) – jQuery 日本語リファレンス
http://semooh.jp/jquery/api/ajax/load/+url,+data,+callback+/