Div (hộp thông báo) không ẩn trong thời gian chạy bằng cách sử dụng jQuery

Question

Tôi có biểu mẫu đăng nhập như sau.

<li class="loginlink"> 
    <a id="showlogin" href="#"> 
     <span style="color: #666666">Login</span> 
    </a> 
    <div class="loginbox" style="display: block;"> 
     <fieldset> 
      <label>User Name : </label> 
      <input id="input" type="text" value="" name="input"> 
     </fieldset> 
     <label> 
      <span style="display: inline-block; ...;"> Password :</span> 
     </label> 
     <input id="password_txt" type="password" style="padding:5px;..;" 
       value="" name="password_txt"> 
     <p> 
      <a class="loginlink" onclick="mojarra.jsfcljs(document.getElementById('headerForm'), 
        {'j_idt60':'j_idt60'},'');return false" style="color: #666666;.." 
        href="#">Forgot Password? 
      </a> 

      <a class="loginlink" onclick="mojarra.jsfcljs(document.getElementById('headerForm'), 
         {'j_idt63':'j_idt63'},'');return false" style="..." 
         href="#">Register 
      </a> 
     </p> 
     <div class="loginbuttons"> 
      <input id="loginBtn" type="submit" value="Login" name="loginBtn"> 
      <input id="cancellogin" type="button" value="Cancel"> 
     </div> 
    </div> 
</li> 

Khi bạn nhấp vào showlogin. Tôi sử dụng jQuery để hiển thị nó. Giống như

$('#showlogin').click(function(){ 
    var loginBox = $('.loginbox'); 
    loginBox.show(); 
    $('.loginbox fieldset input').focus(); 
    if (!loginBox.is(':hidden')) { 
     validateUser();    
    }   
}); 

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

function validateUser() {  
    $("#loginBtn").click(function(event){ 

     var userName = $("#input").val(); 
     var password = $("#password_txt").val(); 

     if (userName == "") {     
      $.dialog({     
       message: "UserName must be entered", 
       imageIcon: false, 
       type: "error", 
       okButtonID: "ok", 
       okButtonValue: "OK"     
      }); 
      return false;    
     } 
     return true;    
    }); //end of click    
} //end of validateUser() 

Bây giờ những gì đang xảy ra giả sử tôi bấm vào nút hộp được hiển thị như

Bây giờ nếu tôi bấm vào nút đăng nhập, sau đó thông báo xuất hiện

Bây giờ, nếu tôi nhấp vào nút Ok. Hộp biến mất.

Đến đây mọi thứ đều ổn. Bây giờ giả sử tôi đóng biểu mẫu đăng nhập bằng cách nhấp vào nút hủy. Và lại mở biểu mẫu

Bây giờ lại nhấp vào nút đăng nhập. Thông báo sẽ xuất hiện

Nhưng bây giờ thời gian này nếu tôi nhấp vào nút OK, thì lớp phủ sẽ biến mất nhưng không gửi được. Tại sao? Tôi nhận được một cái gì đó như thế này

Tại sao lần này nó không biến mất? Những gì tôi đang làm sai? Hãy giúp tôi?

Cảm ơn

Answer 1

Tôi nghĩ rằng sự cố liên quan đến chức năng validateUser() của bạn. Bạn thấy mỗi khi bạn hiển thị hộp đăng nhập, bạn liên kết một trình xử lý nhấp chuột mới chứa mã để hiển thị hộp thoại cho nút đăng nhập.

function validateUser() {  
    $("#loginBtn").click(function(event){ 
    ... 
    }); 
} 

Điều này có nghĩa là lần thứ hai hộp đăng nhập hiển thị hộp thoại thực sự được hiển thị hai lần. Lần thứ 3 hộp thoại được hiển thị 3 lần. Bạn có thể không thấy điều này vì bạn đang định tâm nó. Nếu bạn thả chức năng Javascript alert() sau dòng $.dialog.createUI = function (config) { bạn sẽ thấy lần thứ 2 thông tin đăng nhập được hiển thị, bạn nhận được 2 cảnh báo! Xem fiddle ví dụ về vấn đề này.

Trừ khi mã của bạn thực hiện điều gì khác trong hàm xác thực người dùng, tôi khuyên bạn nên bỏ chức năng này và thay vào đó ràng buộc trình xử lý nhấp chuột khi tài liệu sẵn sàng. Vì vậy, bạn kết thúc với một cái gì đó như thế này:

$(document).ready(function() { 

    $("#loginBtn").click(function (event) { 

     var userName = $("#input").val(); 
     var password = $("#password_txt").val(); 

     if (userName == "") { 
      $.dialog({ 
       message: "UserName must be entered", 
       imageIcon: false, 
       type: "error", 
       okButtonID: "ok", 
       okButtonValue: "OK" 
      }); 
      return false; 
     } 
     return true; 
    }); 

    $('#showlogin').click(function() { 
     var loginBox = $('.loginbox'); 
     loginBox.show(); 
     $('.loginbox fieldset input').focus(); 
     // code to call validate user removed from here! 
    }); 

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