いつjQueryのdocument.ready関数を使用すればよいですか？

107

私が最初にJavascript / jQueryを使い始めたとき、document.readyを使うように言われましたが、その理由を本当に知りませんでした。

誰かがjavascript / jqueryコードをjQueryの中にラップするのが理にかなっているときについていくつかの基本的なガイドラインを提供するかもしれdocument.readyませんか？

興味のあるトピック：

jQueryの.on()メソッド：.on()AJAX のメソッドをかなり使用しています（通常、動的に作成されたDOM要素に対して）。必要がある.on()クリックハンドラは常になる内部 document.ready？
パフォーマンス：さまざまなjavascript / jQueryオブジェクトを document.readyの内部または外部に保持する方がパフォーマンスが高いですか（また、パフォーマンスの違いは重要ですか？）？
オブジェクトスコープ：AJAXで読み込まれたページは、前のページのdocument.ready 内にあったオブジェクトにアクセスできません。よろしいですか？document.readyの外部にあるオブジェクト（つまり、本当に「グローバル」なオブジェクト）にのみアクセスできますか？

更新：ベストプラクティスに従うために、すべてのJavaScript（jQueryライブラリとアプリのコード）はHTMLページの下部にありdefer、AJAXでロードされたページでjQueryを含むスクリプトの属性を使用して、これらのページでjQueryライブラリにアクセスできます。

— ティム・ピーターソン
ソース

2

DOMの準備ができていない場合、予期しない結果が生じる可能性があるためです。

— ロバートハーベイ、

1

2.-さて、私はデバッグのためだけに外部を使用し、コンソールによっていくつかのvar / functionを呼び出すことができます

— jd_7

@RobertHarveyどのような「予期しない」結果になりますか？例を提供できますか？

— ティム・ピーターソン2012年

3

まだDOMに到達していない要素または属性を変更しようとしました。

— ロバートハーベイ

143

簡単に言えば、

$(document).readydocument準備ができると起動するイベントです。

headセクションにjQueryコードを配置し、dom要素（アンカー、imgなど）にアクセスしようとすると、jQueryコードがhtml上から下に解釈され、html要素が存在しないため、アクセスできない実行します。

この問題を克服するために$(document).ready、すべてのdom要素にアクセスできるときに呼び出されるすべてのjQuery / javascriptコード（DOMを使用）を関数内に配置します。

これが理由です。jQueryコードを一番下（すべてのdom要素の後、直前</body>）に配置すると、$(document).ready

上記で説明したのと同じ理由で、メソッドを使用する場合onに$(document).readyのみ、メソッドを内部に配置する必要はありません。ondocument

    //No need to be put inside $(document).ready
    $(document).on('click','a',function () {
    })

    // Need to be put inside $(document).ready if placed inside <head></head>
    $('.container').on('click','a',function () {
    });

編集

コメントから、

$(document).ready画像やスクリプトを待ちません。それが$(document).readyとの大きな違いです$(document).load
DOMにアクセスするコードのみを準備ハンドラーにする必要があります。プラグインの場合は、readyイベントに含めないでください。

— ジャシュワント
ソース

@Dipaksはい、なぜですか？使用に慣れているだけ$(document).readyです。これを

— ジャシュワント2012年

でjQueryをロードheadし、要素が操作された後にスクリプトを実行している限り、document.ready必要はありません。ただし、画像は特別なケースです

— elclanrs '25 / 10/25

@elclanrs私の更新された質問を参照してください。HTMLページの下部にjQueryをロードし、その直後にアプリ固有のコードを記述します。

— ティム・ピーターソン

@Jashwant dom.readyとnotのパフォーマンスの違いはどうですか？それらは関連していますか？

— ティム・ピーターソン、

1

すべてのjQueryコードをレディハンドラーに配置するわけではありません。DOMにアクセスするコードのみ。プラグインの場合は、ready イベントに

— Juan Mendes

7

答え：

jQueryの.on（）メソッド：AJAXの.on（）メソッドをかなり使用しています（動的にDOM要素を作成しています）。.on（）クリックハンドラーは常にdocument.ready内にある必要がありますか？

いいえ、常にではありません。JSをドキュメントヘッドにロードする場合は、ロードする必要があります。AJAXを介してページが読み込まれた後に要素を作成する場合は、作成する必要があります。スクリプトがハンドラーを追加するhtml要素の下にある場合も、必要はありません。

パフォーマンス：さまざまなjavascript / jQueryオブジェクトをdocument.readyの内部または外部に保持する方がパフォーマンスが高いですか（また、パフォーマンスの違いは重要ですか？）？

場合によります。ハンドラーをアタッチするのと同じ時間がかかります。ページが読み込まれたときにすぐに実行するか、ドキュメント全体が読み込まれるまで待機するかによって異なります。そのため、ページで他に何をしているのかによって異なります。

オブジェクトスコープ：AJAXで読み込まれたページは、前のページのdocument.ready内にあったオブジェクトにアクセスできません。よろしいですか？document.readyの外部にあるオブジェクト（つまり、本当に「グローバル」なオブジェクト）にのみアクセスできますか？

これは基本的に独自の関数であるため、グローバルスコープ（すべての関数の外/上）で宣言された変数にのみアクセスできます。 window.myvarname = '';

— ジャスティン
ソース

6

jQueryを安全に使用する前に、ページが操作可能な状態にあることを確認する必要があります。jQueryでは、コードを関数に入れ、その関数をに渡すことでこれを実現し$(document).ready()ます。渡す関数は、単に無名関数にすることができます。

$(document).ready(function() {  
    console.log('ready!');  
});

これにより、ドキュメントの準備ができたら.ready（）に渡す関数が実行されます。何が起きてる？$（document）を使用してページのドキュメントからjQueryオブジェクトを作成し、そのオブジェクトで.ready（）関数を呼び出して、実行する関数を渡します。

これは自分でよく行うことなので、必要に応じてこれを簡略化する方法があります。$（）関数は、関数を渡すと$（document）.ready（）のエイリアスとしても機能します。

$(function() {  
    console.log('ready!');  
});

これは良い読書です：Jquery Fundamentals

— トム・サルドゥイ
ソース

3

(function($){ })(jQuery);$がそのクロージャ内のjQueryになるようにコードをラップすると混同しないでください

— John Magnolia

3

.ready（） -DOMが完全に読み込まれたときに実行する関数を指定します。

$(document).ready(function() {
  // Handler for .ready() called.
});

ここにすべてのjQueryメソッドのリストがあります

$（document）.ready（）の紹介を読む

— ディパック
ソース

3

現実的でdocument.readyあるためには、DOMを正確に操作すること以外には何も必要ありません。また、それは必ずしも必要ではなく、最良のオプションでもありません。つまり、たとえば大規模なjQueryプラグインを開発するときは、コード全体で使用することはほとんどありません。DRYを維持しようとしているため、DOMを操作するメソッドで可能な限り抽象化し、呼び出されることを意図しています。後で。すべてのコードが緊密に統合されてdocument.readyいる場合init、公開される唯一のメソッドは通常、すべてのDOMマジックが発生する場所です。これがあなたの質問に答えることを願っています。

— Elclanrs
ソース

0

ドキュメントが完全に読み込まれるまで待機する必要があるため、すべてのアクションをdocument.readyにバインドする必要があります。

ただし、すべてのアクションの関数を作成し、document.ready内から呼び出す必要があります。関数（グローバルオブジェクト）を作成するときは、いつでも呼び出すことができます。新しいデータが読み込まれ、新しい要素が作成されたら、それらの関数を再度呼び出します。

これらの関数は、イベントとアクションアイテムをバインドしたものです。

$(document).ready(function(){
bindelement1();
bindelement2();
});

function bindelement1(){
$('el1').on('click',function...);
//you might make an ajax call here, then under complete of the AJAX, call this function or any other function again
}

function bindelement2(){
$('el2').on('click',function...);
}

— プルキットミッタル
ソース

0

divへのリンクを追加し、クリックでいくつかのタスクを実行したいと思いました。DOMの追加された要素の下にコードを追加しましたが、機能しませんでした。これがコードです：

<div id="advance-search">
   Some other DOM elements
   <!-- Here I wanted to apppend the link as <a href="javascript:;" id="reset-adv-srch"><span class="bold">x</span> Clear all</a>-->
</div>

<script>
  $("#advance-search #reset-adv-srch").on("click", function (){
     alert('Link Clicked');``
  });
</script>

うまく行かなかった。次に、jQueryコードを$（document）.ready内に配置し、完全に機能しました。ここにあります。

$(document).ready(function(e) {
    $("#advance-search #reset-adv-srch").on("click", function (){
        alert('Link Clicked');
    });
});

— 安全なアーメド
ソース

-2

DOM（ドキュメントオブジェクトモデル）が読み込まれると、readyイベントが発生します。

このイベントはドキュメントの準備ができた後に発生するため、他のすべてのjQueryイベントと関数を配置するのに適しています。上記の例のように。

ready（）メソッドは、readyイベントが発生したときの動作を指定します。

ヒント：ready（）メソッドは、と一緒に使用しないでください。

— シュリカントシャイダー
ソース