2010-11-21 5 views
0

사용자 클릭시 입력 유효성 검사를 수행하려고합니다. 그러나 jQuery click() 함수는 일관성없이 작동합니다. 때로는 예상대로 작동하지만 때때로 링크를 클릭해도 화면 상단으로 뷰포트를 이동하는 것 외에는 아무 것도하지 않습니다. 문제는 일관되게 오류를 복제 할 수 없다는 것입니다. 때로는 효과가 있고 때때로 그렇지 않습니다. 필자는 Windows XP의 Firefox와 Mac의 Chrome 9.0에서 모두 재현 해 냈지만 때로는 페이지가 작동하고 때로는 그렇지 않을 수도 있습니다. 한 번 잘못로드했을 때 캐시를 지우고 페이지를 다시로드하려고 시도했지만 페이지가 여전히로드되지 않았습니다. 특히 파일을 크게 변경 한 후에는 로딩하지 않는 것에서 로딩하는 것으로 나타납니다.jquery click() working inconsistently

여기에 축소 된 테스트 케이스를 설정합니다 : http://kburke.org/thesis/consentform1.php. 양식이 올바르게 작동하면 경고 상자가 표시됩니다.

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 

    $("#submitlink").click(function(){ 
     console.log("link clicked"); 
     alert("Clicked!"); 
    }); 
    console.log("loading..."); 
}); 
</script> 
</head> 
<body style="width:35em; margin-bottom:200px;"> 
<input type="text" value="" name="part_name" id="name1" /> 
<input type="text" value="" name = "part_name2" id="name2" /> 
<input type="checkbox" name="accept_1" id="accept_1" />I signify my agreement that all matters and issues mentioned above have been discussed to my satisfaction and agreement.  <br><br> 
<input type="checkbox" name="accept_2" id="accept_2" />I acknowledge that I am 18 years of age or older on the date of signing this consent, and that I have read and understood all of the above.</p> 
<div id="submitlink" style="float:right; color:blue; text-decoration:underline; cursor:pointer;">I agree</div> 
<form method="post" id="agree" action="/thesis/instructions.php"> 
    <input type="hidden" name="id" id="nextpage" value=""> 
    <input type="hidden" name="name" id="the_name" value="" /> 
</form> 
</body> 
</html> 

가 나는 행동이 일치하지 않는 특히 것을 당황하고, 당신이 가진 수있는 통찰력을 주셔서 감사합니다 : 여기에 코드입니다.

편집 :console.log이 문제를 일으키는 것으로 제안되었지만 콘솔 진술을 제거한 후에도 문제가 계속되고 있습니다. Chrome의 JS 디버거를 실행하면 문제가 발생했을 때 $("#submitlink") 호출 내의 코드가 전혀 실행되지 않고 있음을 알 수 있습니다. 늘 그렇듯이 도와 주셔서 감사합니다.

+0

오류를 생산하는 전체 페이지가 여기에 있습니다 : http://kburke.org/thesis/consentform.php 페이지 –

+0

링크가 내 크롬에서 잘 작동합니다. .. – Lukman

+0

나에게 맞는 현재 버전 (작동하지 않는 곳)은 Mac의 Chrome 7.0입니다. 나는 또한 가능한 가장 작은 경우로 줄 였지만 아직도 나를 위해 일하지 않는다. –

답변

1

나는 문제를 해결했다. Google 보이스 크롬 확장 프로그램이 페이지의 전화 번호에 링크를 추가하여 jQuery 액션을 방해하고있었습니다. 중요한 테스트에서 페이지의 요소를 제거하고 Chrome 확장 프로그램을 사용 중지해도 확장 프로그램이 문제를 일으키는 것으로 확인되었습니다.

다음 번엔 모든 확장 기능을 비활성화하여 문제의 원인인지 확인하려고 노력할 것입니다.

나는 여기에 버그 리포트를 제출 : http://code.google.com/p/chromium/issues/detail?id=64019

+0

실제로 gvoice에서 클릭 가능한 숫자를 만들 수 없도록 설정하면 문제가 사라진다는 사실을 알게되었습니다. – robx

3

코드에 console.log() 문이있는 것으로 나타났습니다. 필자가 알아챈 점은 Firebug를 열었을 때 코드가 작동한다는 것입니다. Firebug를 끄면 코드가 작동하지 않습니다.

console 개체는 JavaScript 자체의 일부가 아닙니다. 이것은 벌크 alert 디버깅 방법을 대체하기 위해 Firebug (및 다른 많은 디버깅 도구)에 의해 만들어졌습니다. Firebug가 꺼지면 console.log() 행에 치명적인 오류가 발생하여 JavaScript가 실행되지 않습니다.

+0

흠. 그것은 오류를 표시하지 않는 Firebug에서 콘솔을 열어 오류를 검사 할 때 특히 설명하는 것처럼 보입니다. –

+0

@Kevin, 모든 브라우저가 이것을 지원하지 않으므로 항상 consolo.log 메시지를 try catch 블록에 보관하는 것이 안전합니다. – kobe

+0

나는 보통'safeLog' 함수와 같은 것을 만들고, if ($ .isFunction (console.log)) {console.log (...); }' – rossipedia

0

제거 CONSOLE.LOG, CONSOLE.LOG로 늘 사용할 수 항상