2009-12-04 7 views
1

:jQuery를 DOM 준비

<form> 
    <fieldset> 
     <button id="indexGetStarted" class="button" type="submit">Get Started!</button> 
    </fieldset> 
</form> 
<script type="text/javascript"> 

    $(document).ready(function() { 

     $('#indexGetStarted').click(function() { 
      $('form').submit(); 
      return false; 
     }); 

    }); 

</script> 

$(document).ready(function() { ... }가 필요합니까?

답변

9

이 스크립트가 실행되기 전에 버튼을 선언 했으므로 (사실상 귀하의 양식이라고 가정하기 때문에) 항상 사용할 수 있습니다. 하지만이 함수를 제거하면 문서에서 스크립트 블록과 HTML 요소가 서로 관련되어 코드가 달라집니다.

+1

그게 내가 의심하는 것입니다. IE는 시각적 스타일을 첨부 할 때 특히 DOM 준비 기능을 사용하여 지연을 나타냅니다. 나는 그것을 단지 제거하려고 노력하고있다. – Rudy

2

예, 그것은 깨끗한 코드를 작성할 필요하지만 바로 가기를 가지고있다 :

$(function() { .... }); 
// is the same as 
$(document).ready(function() { .... }); 

DOM을 조작하는 이벤트를 부착, 개체의 동작 등은 DOM 개체가 예측할 수 완전히로드가 전에 종종 전혀 작동하지 않습니다.

은 스크립트 부분이로드되기 전에 요소가 선언 된 경우 작동합니다.

0

엄밀히 말하면, 동봉 코드의 DOM 요소에 액세스하는 경우 항상 필요합니다. $(document).ready()$('#indexGetStarted')을 통해 DOM 트리에 액세스 할 때 DOM 트리가 완전히 빌드 될 때까지 코드의 실행을 지연시킵니다. 실질적으로 어쨌든 작동 할 것입니다.하지만 권장하지는 않습니다.

0

아니요, 필요하지 않습니다. 소스의 DOM 요소 뒤에 스크립트를 배치하면 해당 요소를 자연스럽게 사용할 수 있습니다. 일부 테스트 결과 특히 IE에서 렌더링 속도가 빨라진다는 것을 알 수 있습니다.

마크 업의 앞부분에있는 'ready'이벤트에 내용을 바인딩 한 다음 $.ready()을 실행하여 동일한 효과로 본문을 닫을 수 있습니다.