Jquery에서 스크립트 위치가 중요합니까?

JQuery를 사용하는 동안 스크립트 태그의 위치가 중요한지 누군가가 알 수 있습니까? 예를 들어Jquery에서 스크립트 위치가 중요합니까?

: 필요하지만 다음 작품으로

이

<script> 
$("a").click(function(event) { 
    event.preventDefault(); 
    $('<div/>') 
     .append('default ' + event.type + ' prevented') 
     .appendTo('#log'); 
}); 
</script> 

<a href="http://jquery.com">default click action is prevented</a> 
<div id="log"></div>

은 위의 코드가 작동하지 않습니다

<a href="http://jquery.com">default click action is prevented</a> 
<div id="log"></div> 
<script> 
$("a").click(function(event) { 
    event.preventDefault(); 
    $('<div/>') 
     .append('default ' + event.type + ' prevented') 
     .appendTo('#log'); 
}); 
</script>

왜 두 번째 일을 했습니까? 코드가 위에서 아래로 순차적으로 작동하기 때문입니까? 또한 첫 번째 코드가 .ready() 안에 있으면 위치가 중요하지 않습니다.

출처

2011-08-15 Harke

위치가 중요합니다. 첫 번째 경우에는 document.ready 핸들러에 DOM 요소를 래핑해야한다는 의미로 스크립트를 배치합니다. 그렇지 않은 경우 .click 핸들러를 연결하는 순간 앵커가 아직 존재하지 않습니다.

<script> 
$(function() { 
    $("a").click(function(event) { 
     event.preventDefault(); 
     $('<div/>') 
      .append('default ' + event.type + ' prevented') 
      .appendTo('#log'); 
    }); 
}); 
</script> 

<a href="http://jquery.com">default click action is prevented</a> 
<div id="log"></div>

가 (문서의 끝에 스크립트를 배치 : 다음은 전체 DOM이로드 준비가 조작 할 때 .click 핸들러 만 부착됩니다 문서 준비의 의미로 스크립트를 래핑 수있는 방법 닫는 바로 전에 <body> 태그)도 좋은 연습입니다 (실제로는 Best Practices for Speeding Up Your Web Site의 권장 사항 중 하나임).이 경우에는 document.ready으로 묶을 필요가 없습니다.

출처

2011-08-15 15:08:24

답장을 보내 주셔서 감사합니다. 그래서 .ready()를 사용하고 시작 부분에 스크립트를 두거나 코드 끝 부분에 스크립트를 작성하여 어느 쪽이 더 낫겠습니까? – Harke

@Harke, 문서 끝 부분에 스크립트를 두는 것이 좋습니다. –

슈퍼 감사 !!! – Harke

스크립트 태그의 내용은 페이지를 구문 분석하는 동안 브라우저에 의해 발견 된 순간에 실행됩니다. 첫 번째 예에서 코드는 HTML 앞에옵니다. 스크립트가 실행될 때 yhour <a> 및 <div>을 포함하는 HTML은 아직 브라우저에 의해 구문 분석되지 않았기 때문에 $('a')은 아직 존재하지 않으므로 실패합니다.

두 번째 버전은 <a>이 이미로드되었거나 페이지의 DOM에 있기 때문에 작동합니다.

이 문제를 해결하려면 .ready() 함수가 있습니다.이 함수를 사용하면 페이지의 전체 DOM을 사용할 준비가 된 후에 만 실행할 코드를 등록 할 수 있습니다.

$(document).ready(function() { 
    ... your code here ... 
});

출처

2011-08-15 15:09:48

첫 번째 시험에서는 요소가 존재하기 전에 코드가 실행되고 있습니다. 다음 두 가지 중 하나를 수행 할 수 있습니다.

1) 두 번째 예와 같습니다.

2)는 대신 .click의 다음()

$("a").live('click',function(){ 
    // do stuff here 
});

이 함수 내부의 "물건"에) (신규 및 이전의 모든 앵커를 바인딩 할 수 있습니다. 엘리먼트가 아직 DOM에 추가되지 않았다는 것은 중요하지 않습니다.

출처

2011-08-15 15:10:04 circusdei

live()가 bind()와 다른 점은 주목할 가치가 있습니다. 주의 사항 섹션을보십시오 : http://api.jquery.com/live/ – canon

답장을 보내 주셔서 감사합니다. .live() 또는 .ready()를 사용하는 것이 더 좋습니까? – Harke

시도해보십시오. DOM을 사용할 준비가 될 때까지 기다려야합니다.

$(function() { 
    $("a").click(function(event) { 
    event.preventDefault(); 
    $('<div/>') 
     .append('default ' + event.type + ' prevented') 
     .appendTo('#log'); 
}); 
});

출처

2011-08-15 15:10:11 ShankarSangoli

JQuery와는 (이하 ""태그에 "클릭"이벤트 바인딩이 경우)에 결합되는 요소가 이미 DOM에로드되어야한다. 그렇지 않으면 JS가 실행될 때 해당 "a"요소가 아직 존재하지 않습니다.
1은 두 번째 예에서와 같이 문서의 끝 부분에 jQuery를 넣어

솔루션 :

이 세 가지 가능한 솔루션이 있습니다.

해결책 2
감싸고 $ (문서)에 JS 코드 .ready() 함수, 마지막 옵션이 사용하는 3
같은

$(document).ready(function(){ 
    //the rest goes in here 
});

솔루션 jQuery의 .live() 메소드는 .live() 메소드가 호출되기 전후에 작성된 모든 DOM 요소에 이벤트를 바인딩합니다. 예를 들어, 경우 (이하 "는"요소를로드하기 전에 JS를 실행) 첫 번째 코드는 잘 작동

$('a').live('click',function(){ //click event action });

로 변경되었습니다. 그러나이 세 번째 옵션은 .live()가 항상 새로운 요소가 만들어 질 때주의를 기울임으로써 브라우저가 더 많은 작업을하도록 강제하기 때문에 가장 바람직하지 않습니다. 앞의 두 가지 옵션 중 하나가 분명 좋습니다.

출처

2011-08-15 15:13:19 maxedison

Jquery에서 스크립트 위치가 중요합니까?

답변

관련 문제