2012-04-09 5 views
1

jQuery의 아무 것도 Chrome에서 작동하지 않는 것 같습니다. 내 버전은 18.0.1025.151 m입니다. 자바 스크립트 파일에 test.js입니다 :jQuery가 Chrome에서 작동하지 않습니다. 18

$('#paragraph').click(function() { 
$('#paragraph').hide(); 
}); 

그리고 HTML은 이것이다 :

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery Example</title> 

    <script src="jquery-1.7.1.min.js"></script> 
    <script src="test.js"></script> 
</head> 
<body> 
    <p id="paragraph">This is my paragragh 401!</p> 
</body> 
</html> 

내가 그것을해야하는데 어디 jQuery를 파일인지 트리플 확인합니다. 본질적으로 코드는 클릭 할 때 단락을 사라지게해야합니다. 간단하고 구문 적으로 정확합니다. 같은 간단한 코드를 선택했습니다. 왜냐하면 jQuery에서 아무 것도 전혀 작동하지 않았기 때문에 일반적인 자바 스크립트 문과 코드가 잘 작동합니다 (alert()와 같은).

그러나 이상한 부분이 있습니다. Chrome의 개발자 도구에서 콘솔을 사용할 때 동일한 jQuery 입력을 입력하고 Enter 키를 누르면 실제 작동 방식과 작동 방식이 작동합니다.

이것은 Chrome의 보안 구조 또는 다른 것과 관련이 있습니까?

편집 : 또한이 파일을 서버에 아직 업로드하지 않았습니다. 이것은 로컬 호스트에 있습니다 (저는 xammp을 사용하고 있습니다), 아마도이 문제에 대해 밝힐 수 있습니다.

+0

질문 제목에 따르면이 문제는 Chrome 18에서만 발생합니다. 그것은 다른 모든 브라우저에서 작동합니까? – j08691

+0

이상하게도 Firefox와 Internet Explorer 9에서 작동합니다. – Sparx401

+1

javascript가 document.ready 기능으로 싸여 있습니까? – Trent

답변

3

문서에서 코드를 감싸거나 끝 바디 태그 앞에 test.js을 넣으십시오.

+0

와우, 신체의 끝에 스크립트를 배치 작품! 고마워요. 많은 사람들! 이 사이트 바위.:) – Sparx401

+1

다른 답변에 따라 의사 준비 작업을 수행하는 방법을 배워야하는 경우가 있습니다. 때로는 최종 본문 태그 앞에 스크립트를 두는 것이 항상 가능하지는 않습니다. –

2

DOM이 준비되기 전에 실행 중입니다. 그것은 다음과 같아야합니다

$(function(){ 
    $('#paragraph').click(function() { 
     $('#paragraph').hide(); 
    }); 
}); 

아래의 코멘트를 해결하기 위해 :

http://api.jquery.com/ready/

.ready() 메소드는 일반적으로 익명 함수와 함께 사용됩니다

$(document).ready(function() { 
    // Handler for .ready() called. 
}); 

ㅁㅁ 무형 문화 유산은 호출하는 것과 같습니다

$(function() { 
// Handler for .ready() called. 
}); 
+2

@ iambriansreed 나는 네가 틀린 선생이라고 믿는다. :) 내 편집을 참조하십시오. – asawyer

+0

Dang it. 학교가. – iambriansreed

+1

@iambriansreed 걱정할 필요가 없습니다. 나는 coffeecript 버전을 더 좋아한다. 간단히 말해서 :'$ ->' – asawyer

0

당신은 문서 준비에 포장해야합니다. 아마 그게 네 문제 일거야. 또한 $(this)을 사용하거나 선택기를 캐시 할 수 있습니다.

$(function() { 
    $('#paragraph').click(function() { 
     $(this).hide(); 
    }); 
}); 
관련 문제