この記事は賞味期限切れです。（更新から1年が経過しています）

jQueryでDOMのロード完了を検知するのに使われる$(document).readyですが、
これを未挿入の要素に対して使いたい。そんなメモログ。

$(document).ready()について

まず、$(document).ready()について。
引数に渡された関数が、HTMLのDOM構築が完了した時点で呼ばれるという便利機能。

$(document).ready(function(){
    // DOMロード完了時に実行される
    alert("Hello, world !");
});

jQueryを使っていれば一度はお目にかかる定型文ですね。
仕組みについては、こちらの記事が大変詳しく書いてありました。
$(document).ready(f)、bindReady()、$.ready() 解読 ──jQuery解読(32)

$( selector ).onReady();

で、今回は”document”が入っている部分にセレクタを渡して、
その要素がJSで動的に挿入されたタイミングで関数を実行させる… というのが趣旨です。

書いてみたのはこちら。
mach3/js-jquery-onready – GitHub

簡単な使い方

$("#MyContainer").onReady( function(){
    this.append("Hello, world!");
});
$("#hoge").click( function(e){
    $("<div />").attr("id", "MyContainer").appendTo("body");
});

最初は#MyContainerは存在せず、#hogeボタンをクリックする事でbodyに追加されます。
追加されるとそれを検知して、#MyContainerに”Hello, world!”が表示されます。

オプション

内部的には、お察しの通りsetTimeoutでまわしてるだけですが、
そのインターバルと制限時間を第二引数のオプションで設定する事も出来ます。

$("#MyContainer").onReady(
    function(){
        // Do anything.
    },
    {
        "limit" : 30000, // 制限時間（ミリ秒）
        "delay" : 1000 // インターバル（ミリ秒）
    }
);

limit : number = 60000

制限時間。これを超えるとonReadyは諦めます。デフォルトは1分。

delay : number = 500

setTimeoutのインターバル。デフォルトは0.5秒。

いつ使うの？

さして出番は多くないかもしれませんが、
例えばscript要素を差し込むタイプのサードパーティのウィジェット等で、
ページ最下部の非表示ブロック内でロードさせておいて、
ロードされたら本来あるべき場所にappendする、等。
多少のページパフォーマンスの向上に役立つかもしれませんね？

あとは、同じくウィジェットの要素からいろいろ抜き取って加工して表示させたい場合などに。