« DisられやすいPHP | メイン | Yahoo! ASTRA Flash and Flex components リリース »

jQueryの$(function)がwindow.onload後に効かない問題

病み上がり職場復帰のリハビリ代わりに、下記jQueryの$(function)の挙動をソースから追っかけてみました。

で、amachangの

jQuery.event.special.ready.setup()
/* または */
$.event.special.ready.setup()

は、たしかjQuery1.2.2から実装されたイベントAPIの一種なので、それ以前のバージョンのjQueryでは使えないので使うときはバージョンを要チェックです(ちがってたらゴメンナサイ)。

川崎さんが困っている、

具体的には、DOM 構築完了後に、script 要素を DOM ツリーに追加して、
そのソース中で $(function) した場合とかに、C の状態が発生する。

という現象は、そもそも普通に実行しちゃだめなのかなぁと思うのですが、どうなんだろう。

hoge()を$(hoge)と書かなければいけない理由が作られているアプリにあるのかな。

 

ソースを見ていて、

(C) DOM 構築完了前に実行される JavaScript 中で $(function) を呼び出さないまま
  DOM 構築後に初めて $(function) を呼び出す
    →スルーされる

こうなっちゃうのは、jQuery.ready()が実行されていないからで、強引に、

$.ready()

とかやっちゃえば使えるようになるんだけど、これもいまいちかな。

$(function)をDOM構築前に実行すると、以下のbindReady()が実行されて、最後にwindowがloadするタイミングでjQuery.ready()が実行されるようになっているから間違っちゃいないとは思うんだけども。うーむ。

function bindReady(){
 if ( readyBound ) return;
 readyBound = true;
 // If Mozilla is used
 if ( jQuery.browser.mozilla || jQuery.browser.opera )
  // Use the handy event callback
  document.addEventListener( "DOMContentLoaded", jQuery.ready, false ); 
 // If Safari or IE is used
 // Continually check to see if the document is ready
 else (function(){
  try {
   // If IE is used, use the trick by Diego Perini
   // http://javascript.nwbox.com/IEContentLoaded/
   if ( jQuery.browser.msie || document.readyState != "loaded" && document.readyState != "complete" )
    document.documentElement.doScroll("left");
  } catch( error ) {
   return setTimeout( arguments.callee, 0 );
  }
  // and execute any waiting functions
  jQuery.ready();
 })();
 // A fallback to window.onload, that will always work
 jQuery.event.add( window, "load", jQuery.ready );
}