Kのプログラミング勉強ブログ

プログラミング勉強中のKです。できるだけ簡潔に、勉強したことをブログに載せていこうと思います。

【JQuery】appendした要素を操作する

例えば以下の様にappendした要素からwidthを取得しようとすると、
取得できる時とできない時がある。

var test = $('<div id="test"></div>');
$('body').append(test);
console.log(test.width());

これはappendした要素のロードは非同期で行われていることが原因。

そうなると、要素追加が完了したタイミングで次の処理に進めばいいことになる。

解決策は以下の様になる。

var test = $('<div id="test"></div>');
$('body').append(test);
test.ready(function() {
 console.log(test.width());
});

.ready()によってロード完了が取得できるため、callback関数で行いたい処理を記述してやればいい。
なるほど。