端くれプログラマの備忘録 jQuery [jQuery] 基本メモ: loadメソッド

[jQuery] 基本メモ: loadメソッド

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

load( url, data, callback )

サンプルコード

<button>Read More</button>
<div id="result"></div>
$('button').click(function() {
 $('#result').load('more.html');
});

more.html

<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', function() {
        $('#message').css('color','red');
    });
});

参考サイト

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