document.ready 함수가 작동하지 않습니다.

은 document.ready가 필요합니다. 이 질문은 수많은 시간을 물었습니다.document.ready 함수가 작동하지 않습니다.

이 코드는 document.ready와 내가이와 스크립트 태그의 내용을 대체한다면, 그러나 완벽하게

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("#p1").mouseenter(function(){ 
    alert("You entered p1!"); 
    }); 
}); 
</script> 
</head> 
<body> 

<p id="p1">Enter this paragraph.</p> 

</body> 
</html>

작동합니다.

$("#p1").mouseenter(function(){ 
    alert("You entered p1!"); 
    });

더 이상 작동하지 않습니다. 그러나 인수가 마우스 입력시 문서 준비가되지 않은 것이라면 시도하기 전에 몇 분 기다렸으며 여전히 작동하지 않습니다. 내가

출처

2014-12-29 aceminer

"시도하기 전에 몇 분 기다렸습니다"라는 의미는 무엇입니까? 당신은 그렇게 않았다 방법? – Kobi

* "시도하기 전에 몇 분 기다렸으며 여전히 작동하지 않습니다."*이 코드는'$ ("# p1")'을 실행하면 DOM 트리가 아직로드되지 않았습니다. 따라서 '

'요소가 없습니다. DOMContentLoaded 이벤트를 사용하면 DOM로드가 완료되는 즉시 코드가 실행되도록 할 수 있습니다. – dfsq

* 마우스 입력시 문서가 준비되지 않았습니다. * : 어디에서 인수 했습니까? 자바 스크립트 엔진이 코드에서 해당 라인을 만날 때 문서가 준비되지 않았기 때문에 'p'를 찾지 못합니다. – Abhitalks

은 또한 당신은 바닥body의 태그에 해당 스크립트를 넣을 수 있습니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <p id="p1">Enter this paragraph.</p> 
 
    <script> 
 
    $("#p1").mouseenter(function() { 
 
     alert("You entered p1!"); 
 
    }); 
 
    </script> 
 
</body>

Q : 왜 $("#p1").mouseenter()head 태그에, 심지어 대기 잠시 후 작동하지 않는 이유는 무엇입니까?

A : $("#p1")는 기능하고 호출 될 때마다, 그것은 ID p1 및 레지스터 그것을위한 이벤트 리스너를 요소에 대한 전체 DOM 트리를 보이는, 그래서 DOM은 여전히로드 될 때, 그것은 할 수 없습니다 그러한 요소를 찾아 내면 분명히 이벤트 리스너를 등록 할 수 없습니다. 따라서 잠시 후이 요소 위로 마우스를 가져 가면이 요소에 할당 된 이벤트 리스너가 없습니다.

출처

2014-12-29 07:34:01

코드

$("#p1").mouseenter(function(){ 
    alert("You entered p1!"); 
});

을 놓친 거지 뭔가는 DOM 요소, #p1에 연결된 이벤트 처리기가 있습니다. $(document).ready() 핸들러는 핸들러 내에서 코드를 실행하기 전에 모든 DOM 요소가로드되도록합니다. id="p1"의 요소가 연결된 경우 mouseenter 이벤트 처리기를 만들 때 mouseenter 이벤트 처리기는 아무리 기다려도 아무 것도 처리하지 않습니다.

이벤트 처리기를 묶기 전에 항상 요소가 있는지 확인하십시오.

출처

2014-12-29 07:28:12 bowheart

DOM을 읽으면 길을 따라 스크립트를 해석한다는 것을 알아야합니다. 그리고 아직 브라우저에 의해로드되지 않은 요소에 핸들러를 추가하려는 경우. 브라우저가이를 무시합니다. 여기 당신이 3 choces 얻었다하십시오 document.ready 함수 내에서

장소 JS 코드를 - 당신은 그것을 사용하는 :)
대신 모든 JS 코드를 (단지 최종 body 태그 전) DOM의 바닥 -이에 또한 약간의 성능을 향상시킬 수 있습니다
귀하의 스크립트 태그에 defer 속성을 사용하면 브라우저에 DOM이로드 된 후 JS 코드 실행을 시작하도록 알려줍니다. 연기의 특성에 대한

: http://www.w3schools.com/tags/att_script_defer.asp

출처

2014-12-29 07:33:32 Beri

음, jquery 선택기를 사용하기 전에 요소가 DOM에 있어야한다는 점만 알아야합니다. 즉, 요소 아래에 스크립트 태그를 배치하면 준비 이벤트를 사용할 필요가 없습니다. 브라우저는 위에서 아래로 HTML을 읽습니다. 스크립트 태그를 만나면 태그 내의 코드가 즉시 실행되고 jquery 선택기에 배치 된 요소를 찾기 시작합니다.

출처

2014-12-29 07:59:41

document.ready 함수가 작동하지 않습니다.

답변

관련 문제