jQuery関数は内部でのみ動作します。

Question

私はまだjQueryを使い慣れていません。jQuery関数が内部で呼び出されたのはどういうことでしょうか？

たとえば、これは動作します：

$(document).ready(function() { 
    $('#field1').click(function() { 
     $('#result').load('/random_post #post'); 
    }); 
}); 

しかし、これはしません：

$('#field1').click(function() { 
    $('#result').load('/random_post #post'); 
}); 

Answer 1

どのように動作するかは、どのスクリプトや要素がHTMLにレイアウトされるかによって異なります。また、コントロール以外のパラメータ（ブラウザが動作するようにプログラムされている様子など）の影響を受ける可能性があります。

このスクリプトがあなたのページに表示されることを確信していますの前にの要素は、クリックハンドラが追加されたid="field1"が追加されています。これにより、スクリプトが実行され、ドキュメントツリー内にそのような要素が見つかりません（まだ）。スクリプトが実行された後に要素が追加されるため、jQueryはドキュメント全体がロードされた後にそれが正常に機能することを確認します。

ページの最後にこのスクリプトを移動すると、正しく動作するはずです（ただし、最初のスニペットのように、ドキュメント準備完了イベントを使用するのが正しい解決策です）。

Answer 2

DOMツリーが作成されたときレディ機能が実行されます。 id filed1のDOMツリー要素がまだ作成されていない、つまりページがまだ読み込まれていないため、2番目のコードでエラーが発生します。

Answer 3

ドキュメントが完全に解析され、DOMが構築されるまで、DOMにアクセスすることはできません。これには、#field1や#resultのような要素–の変更が含まれます。

$(document).ready(..)が長く、覚えにくい場合もありますので、あなたもちなみに短い形式$(onReadyFunction)、すなわち

$(function() { 
    $('#field1').click(function() { 
     $('#result').load('/random_post #post'); 
    }); 
}); 

を使用することができ、jQueryのは、ここには魔法もしません：それはちょうどと呼ばれるようにあなたの関数を登録しますDOMContentLoaded（または同等の）イベントがDOMツリーの解析と構築によってトリガされたとき。