이 Jquery 함수가 경고 상자를 표시하지 않는 이유는 무엇입니까?

Question

준비 이벤트를 넣을 때 함수가 작동하지만 제거 할 때 관찰 된 것은 아닙니다 ..

작동합니다.

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.clicky').click(function() { 
      alert("TEst10"); 
      $(this).addClass('clicked'); 
      alert("TEst10"); 
      setTimeout(function() { 
       $(this).removeClass('clicked'); 
      }, 1000); 
     }); 
    }); 
</script> 

두 번째가 작동하지 않는 이유는

<script type="text/javascript"> 
    $('.clicky').click(function() { 
     alert("TEst10"); 
     $(this).addClass('clicked'); 
     alert("TEst10"); 
     setTimeout(function() { 
      $(this).removeClass('clicked'); 
     }, 1000); 
    }); 
</script> 

작동하지?

Answer 1

두 번째 코드가 호출 될 때 clicky 클래스의 요소가 DOM 구조에 없기 때문에.

DOM을 준비하고 난 후 document.ready 코드를 래핑했기 때문에 첫 번째 코드가 작동합니다.

clicky 요소를 정의한 후에 스크립트 태그에 코드를 넣으려면 두 번째 코드를 body 태그 끝에 붙여 넣는 것이 좋습니다.

하지만 document.ready을 사용하지 않는 이유는 무엇입니까?

Answer 2

두 번째 코드는 브라우저가 페이지로드를 완료하고 clicky 요소가 아직 존재하지 않을 때 실행됩니다. 일반적인 해결 방법 : 문서로드가 완료되면 (첫 번째 예제처럼) 호출되는 이벤트 핸들러에서 코드를 실행하거나 참조하는 HTML 태그 뒤에 스크립트 태그를 넣거나 live을 사용하여 클릭 핸들러를 바인딩합니다.

Answer 3

대상 요소 앞에 스크립트 태그가 있으면 doc ready를 사용해야합니다. 이것은 이벤트를 이벤트에 첨부하기 전에 요소가 존재해야하기 때문입니다.

왜 doc 준비를 사용 하시겠습니까? 스크립트 태그를 페이지 아래로 이동하여 또는 .live를 사용하여 클릭을 바인딩 할 수 있습니다.

HTH!

Answer 4

ready() 함수는 핸들러입니다. DOM이 준비된 후에 실행할 함수.

JavaScript는 페이지가 렌더링 될 때 코드를 실행하기위한로드 이벤트를 제공하지만이 이벤트는 이미지와 같은 모든 애셋이 완전히 수신 될 때까지 트리거되지 않습니다. 대부분의 경우, DOM 계층 구조가 완전히 구성되는 즉시 스크립트를 실행할 수 있습니다. .ready()에 전달 된 핸들러는 DOM이 준비된 후에 실행되므로 일반적으로 다른 모든 이벤트 핸들러를 연결하고 다른 jQuery 코드를 실행하는 가장 좋은 장소입니다. CSS 스타일 속성 값에 의존하는 스크립트를 사용하는 경우 외부 스타일 시트를 참조하거나 스크립트를 참조하기 전에 스타일 요소를 포함하는 것이 중요합니다.

jquery site