2012-06-06 4 views
1

js 및 jquery로 작업하고 있습니다. 테스트중인 로그인 페이지가 있는데 로그인 버튼의 바인드에 문제가있는 것 같습니다. 크롬에서는 js 파일이로드되고있는 것을 볼 수 있지만 버튼을 클릭하면 페이지가 새로 고쳐집니다. 잘못된 정보를 입력하면 알림 섹션이 표시되거나 흔들리지 않으며 올바른 정보를 입력하면 기본 페이지로 리디렉션되지 않습니다.JS 단추, 바인드 함수가 작동하지 않습니다.

HTML :

<body> 
    <div id="content"> 

     <section class="ui-widget ui-corner-all"> 
      <header class="ui-widget-header ui-corner-top"> 
       Test Login 
      </header> 

      <div class="ui-widget-content ui-corner-bottom"> 

       <p class="ui-state-error">Uername/Password Incorrect.</p> 

       <form> 
        <div> 
         <label for="username">Username:</label> 
         <input id="username" type="text"> 
        </div> 

        <div> 
         <label for="password">Password:</label> 
         <input id="password" type="password"> 
        </div> 

        <div> 
         <input id="btnLogin" type="submit" value="Login"> 
        </div> 
       </form> 
      </div> 
     </section> 
    </div> 

    <div class="ui-widget-overlay" style"z-index: 1002;"> </div> 

</body> 

JS : 여기 내 코드는

$(".ui-state-error").hide(); 

$("#btnLogin").button() 

.bind ("click", function() { 
    if($("#username").val() != "test" && $("#password").val() != "test") { 
     $(".ui-state-error").show(); 
     $("#login section").effect("shake", 150); 
    } 
    else { 
     document.location = 'index.html'; 
    } 

    return false; 
}); 
+0

javacript 블록 –

답변

2

$(function(){ 
    $("#btnLogin").button().bind ("click", function() { 
     if($("#username").val() != "test" && $("#password").val() != "test") { 
      $(".ui-state-error").show(); 
      $("#login section").effect("shake", 150); 
     } 
     else { 
      document.location = 'index.html'; 
     } 

     return false; 
    }); 
}); 
+0

에서'.button()'을 제거하십시오. 작동하지 않습니다. 버튼을 클릭해도 아무 것도하지 않습니다. 그리고 원하는 jQuery UI 포맷을 풀기 위해 .button() 호출이 필요하다고 생각합니다. – Dave

+0

참고로 [예제] (http://jsfiddle.net/RWhitbeck/9s4x6/)에서 예제를 가져오고 있습니다. – Dave

+0

예, JsFiddle에서 작업 중입니다. 내가 추측 할 수있는 한 가지는 올바른 바인딩이며 문서 준비 이벤트에서 만듭니다. 나는 나의 대답을 업데이트했다. – Adil

0

확인하십시오이 : http://jsfiddle.net/Q5YeX/

나는 얇은 k 올바른 jquery UI lib를 참조하지 않았거나 잘못된 방법으로 참조하는 경우

+0

무슨 뜻인지 알 겠어. 어떤 아이디어가 부정확 한가? – Dave

+0

JQueryUI 참조. 헤더 섹션을 포함하여 페이지의 전체 마크 업을 추가하거나