jQuery:動的に追加した要素の取得・操作にはready()を応用する

goto_jp 6,860views 更新:2015年4月13日

背景

  • ある要素がonLoadのタイミングでJSで生成されている
  • その要素に対しては直接手を出せない
  • その要素に対してonLoadのタイミングで操作を行いたい

ready()関数で対応する

ready()は「DOMのロードが完了されたタイミング」で実行される関数。

$(document).ready(function(){~});

documentに対してかけることで、onLoad時の処理が終わった後に再度要素のチェックが行える。つまり2度目のonLoadイベントのようなマネができる。

「#hoge」という要素がonLoad時に外部JSで生成されている場合、下記のようにすれば情報を直接取得することができる。

$(document).ready(function() { // documentのロード完了後に
  $('#hoge').each(function() { // #hogeがあれば
    console.log($(this));      // 情報表示
  });
});

省略形

ready()は下記のように省略して書くことができる。

$(function() {
  $('#hoge').each(function() { // #hogeがあれば
    console.log($(this));      // 情報表示
  });
});

よく見かける $(function() { から始まる書式がおまじないではなく、ターゲットの要素を確実に掴むための書き方ということがようやく分かった…

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません