jQuery 코드가 표시되지 않습니다.

Question

jQuery에 대한 경험이별로 없지만 내 웹 사이트의 이미지 슬라이더를 구현하려고합니다. 나는 그것을위한 지시 사항을 읽었고 올바르게 구현했다고 믿지만, 테스트 할 페이지로 이동할 때는 아무 것도 없다. jQuery가 작동하지 않더라도 적어도 div가 나타나지 않아야합니까? 나는 무엇이 잘못되었는지 이해하지 못합니다. 누군가 내 코드를보고 실수가 있다면 알려주실 수 있습니까? 나는 복사/붙여 넣기의 고통이 될 수있는 몇 가지 외부 스타일 시트가 있기 때문에 주변 코드를 포함하지 않습니다. 그러나 그것이 필요한 경우, 나는 나중에 그것을 다룰 것입니다.

<script src="jquery-1.10.2.js"></script> 
<script src="ion/js/ion-imageSlider/ion.imageSlider.js"></script> 
<script> 
$("#mySlider").ionImageSlider(); 
</script> 
<div class="ion-image-slider" id="mySlider"> 
<a href="http://farm5.staticflickr.com/4102/4911060184_6f78a83288.jpg"><img src="http://farm5.staticflickr.com/4102/4911060184_6f78a83288.jpg" data-caption="Shakespeare House" /></a> 
<a href="http://farm5.staticflickr.com/4096/4925016771_3bac794a81.jpg"><img src="http://farm5.staticflickr.com/4096/4925016771_3bac794a81.jpg" data-caption="Old site" /></a> 
<a href="http://farm5.staticflickr.com/4119/4911067626_a52a6ca492.jpg"><img src="http://farm5.staticflickr.com/4119/4911067626_a52a6ca492.jpg" data-caption="Gymga" /></a> 
</div> 

미리 감사드립니다.

Answer 1

DOM에 아직 추가되지 않은 요소에 액세스하려고 시도합니다. 액세스하기 전에 요소가 DOM에 추가되도록하려면 document.ready을 사용하십시오.

$(document).ready(function(){ 
    $("#mySlider").ionImageSlider(); 
}); 

자바 스크립트가 페이지가 렌더링 될 때 코드를 실행에 대한로드 이벤트를 제공하지만

이 이벤트는 이미지가 완전히 수신 된 등 모든 자산까지 트리거되지 않습니다. 대부분의 경우 스크립트는 DOM 계층이 완전히 으로 생성되는 즉시 실행될 수 있습니다. .ready()에 전달 된 핸들러는 DOM 준비가 완료된 후에 이 실행되도록 보장되므로 일반적으로 에 다른 모든 이벤트 핸들러를 연결하고 다른 jQuery 코드를 실행하는 가장 좋은 장소입니다. CSS 스타일 속성 값에 의존하는 스크립트를 사용하는 경우 스크립트를 참조하기 전에 외부 스타일 시트 또는 포함 스타일 요소를 참조해야합니다. jQuery API.