jQuery의 document.ready 함수는 언제 사용해야합니까?

107

Javascript / jQuery를 처음 사용하기 시작했을 때 document.ready를 사용하라는 지시를 받았지만 실제로 그 이유를 배우지 못했습니다.

누군가가 jQuery 내부에 javascript / jquery 코드를 래핑하는 것이 합리적 일 때에 대한 몇 가지 기본 지침을 제공 할 수 document.ready있습니까?

내가 관심있는 몇 가지 주제 :

jQuery의 .on()방법 : .on()AJAX에 대한 방법을 꽤 많이 사용합니다 (일반적으로 동적으로 생성 된 DOM 요소에서). 해야 .on()클릭 핸들러는 항상 일 안에 document.ready ?
성능 : document.ready 내부 또는 외부에 다양한 javascript / jQuery 객체를 유지하는 것이 더 성능이 좋습니까 (또한 성능 차이가 중요합니까?)?
개체 범위 : AJAX로로드 된 페이지는 이전 페이지의 document.ready 안에 . 맞습니까? document.ready 외부에 있는 개체 (즉, 진정한 "전역"개체) 에만 액세스 할 수 있습니까?

업데이트 : 모범 사례를 따르기 위해 모든 자바 스크립트 (jQuery 라이브러리 및 내 앱 코드)가 내 HTML 페이지 하단 에 있으며defer 에 있으며 AJAX로드 페이지에서 jQuery 포함 스크립트 속성을 이 페이지에서 jQuery 라이브러리에 액세스 할 수 있습니다.

— 팀 피터슨
소스

2

DOM이 준비되지 않은 경우 예상치 못한 결과가 발생할 수 있습니다.

— Robert Harvey

1

2.- 난 그냥 디버그하기 위해 외부에서 사용 하고 콘솔로 var / function을 호출 할 수 있습니다.

— jd_7

@RobertHarvey는 어떤 종류의 "예기치 않은"결과입니까? 예를 들어 줄 수 있습니까?

— tim peterson

3

아직 DOM에 적용되지 않은 요소 또는 속성을 수정하려고합니다.

— Robert Harvey

143

간단히 말해서

$(document).readydocument준비 되면 시작되는 이벤트입니다 .

head섹션에 jQuery 코드를 배치 하고 dom요소 (앵커, img 등) 에 액세스하려고 한다고 가정 하면는 html위에서 아래로 해석되고 jQuery 코드가있을 때 html 요소가 없기 때문에 액세스 할 수 없습니다. 실행합니다.

이 문제를 극복하기 위해 $(document).ready모든 dom요소에 액세스 할 수있을 때 호출되는 함수 내에 모든 jQuery / javascript 코드 (DOM을 사용)를 배치 합니다 .

당신이 (직전, 모든 DOM 요소 후 하단에 jQuery 코드를 배치 할 때 그리고 이것은 이유이다 </body>), 필요에 대한이 없다$(document).ready

배치 할 필요가 없습니다 on위에서 설명한 것과 같은 이유로 메소드 $(document).ready를 사용 on하는 경우에만 메소드를 내부document .

    //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에 액세스하는 코드 만 준비 처리기에 있어야합니다. 플러그인 인 경우 준비 이벤트에 있으면 안됩니다.

— Jashwant
소스

@Dipaks 예, 왜 안돼? 우리는 $(document).ready. 참조 이

— Jashwant

jQuery를에서로드 head하고 요소가 조작 된 후 스크립트 인 한 document.ready필요하지 않습니다. ...하지만 이미지는 특별한 경우

— elclanrs

@elclanrs 업데이트 된 질문을 참조하십시오. 그 직후에 내 앱별 코드로 HTML 페이지 하단에 jQuery를로드하고 있습니다.

— 팀 피터슨

@Jashwant dom.ready와 not의 성능 차이는 어떻습니까? 관련성이 있습니까?

— tim peterson

1

jQuery준비된 핸들러 에 모든 코드를 넣지는 않습니다 . DOM에 액세스하는 코드 만 있습니다. 플러그인 인 경우 ready 이벤트 에 있으면 안됩니다.

— Juan Mendes 2013

7

답변:

jQuery의 .on () 메서드 : AJAX에 대해 .on () 메서드를 꽤 많이 사용합니다 (DOM 요소를 동적으로 생성). .on () 클릭 핸들러는 항상 document.ready 안에 있어야합니까?

아니요, 항상 그런 것은 아닙니다. 문서 헤드에 JS를로드하는 경우 필요합니다. AJAX를 통해 페이지가로드 된 후 요소를 생성하는 경우에는 그렇게해야합니다. 스크립트가 html 요소 아래에 있으면 핸들러도 추가 할 필요가 없습니다.

성능 : document.ready 내부 또는 외부에 다양한 javascript / jQuery 객체를 유지하는 것이 더 성능이 좋습니까 (또한 성능 차이가 중요합니까?)?

때에 따라 다르지. 핸들러를 연결하는데도 같은 시간이 걸리며, 페이지가로드되는 즉시 발생하도록하거나 전체 문서가로드 될 때까지 기다리려는 경우에만 다릅니다. 따라서 페이지에서 수행중인 다른 작업에 따라 달라집니다.

객체 범위 : AJAX로로드 된 페이지는 이전 페이지의 document.ready 안에 있던 객체에 액세스 할 수 없습니다. 맞습니까? document.ready 외부에있는 개체 (즉, 진정한 "전역"개체)에만 액세스 할 수 있습니까?

본질적으로 자체 함수이므로 전역 범위 (모든 함수 외부 / 위)에서 선언 된 vars에만 액세스 할 수 있습니다. 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를하므로 이는 코드를 래핑

— 존 목련

3

.ready ()-DOM 이 완전히로드되었을 때 실행할 함수를 지정합니다.

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

다음은 모든 jQuery 메서드 목록입니다.

$ (document) .ready () 소개 읽기

— Dipak
소스

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>

그것은 작동하지 않았다. 그런 다음 $ (document) .ready 안에 jQuery 코드를 배치했고 완벽하게 작동했습니다. 여기있어.

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

— Safeer Ahmed
소스

-2

DOM (문서 객체 모델)이로드되면 ready 이벤트가 발생합니다.

이 이벤트는 문서가 준비된 후에 발생하기 때문에 다른 모든 jQuery 이벤트 및 함수를 포함하는 것이 좋습니다. 위의 예와 같습니다.

ready () 메서드는 ready 이벤트가 발생할 때 발생하는 작업을 지정합니다.

팁 : ready () 메서드는와 함께 사용해서는 안됩니다.

— Shrikant Shiledar
소스