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

背景

• ある要素がonLoadのタイミングでJSで生成されている
• その要素に対して直接コード修正できない
• その要素に対してonLoadのタイミングでDOM操作を行いたい

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() { から始まる書式がおまじないではなく、ターゲットの要素を確実に掴むための書き方ということがようやく分かった…