web-dev-qa-db-ja.com

jQueryのdocument.ready関数はいつ使用する必要がありますか？

最初にJavascript/jQueryを使用し始めたときにdocument.readyを使用するように言われましたが、その理由を実際に知ることはありませんでした。

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

興味のあるトピック：

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

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

javascriptjquerydomevent-handlingdocument-ready
103
tim peterson

簡単に言えば、

$(document).readyは、documentの準備ができたときに起動するイベントです。

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

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

そして、これがjQueryコードを一番下に配置するとき（すべてのdom要素の後、</body>の直前）、$(document).readyの必要はありません

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

    //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 () {
    });

編集

コメントから、

  1. $(document).readyは、画像またはスクリプトを待機しません。それが$(document).readyと$(document).loadの大きな違いです

  2. DOMにアクセスするコードのみがレディハンドラーにある必要があります。プラグインの場合、readyイベントには含まれません。

140
Jashwant

回答：

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

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

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

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

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

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

7
Justin

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

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

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

これは多くのことを行うことがわかるので、必要に応じてこのための簡単な方法があります。関数を渡す場合、$（）関数は$（document）.ready（）のエイリアスとして2つの役割を果たします。

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

これは良い読み物です： Jquery Fundamentals

5
Tom Sarduy

。ready（） -DOMが完全にロードされたときに実行する関数を指定します。

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

すべてのjQueryメソッドのリスト

Read on $（document）.ready（） の紹介

3
Dipak

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

3
elclanrs

ドキュメントが完全にロードされるまで待つ必要があるため、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
Pulkit Mittal

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');
    });
});
0
Safeer Ahmed