ログインダイアログが機能しないのはなぜですか？

私はAJAX経由でこのウェブサイトにログインさせようとしていますが、submitボタンをクリックすると何も起こりません。コードには事前に感謝しています。ログインダイアログが機能しないのはなぜですか？

$(document).ready(function() { 
 
\t 
 
\t var user, pass; 
 
\t 
 
\t function login(usrnm, pwd) { 
 
\t \t $.ajax({ 
 
\t \t \t url: 'login.php?username=' + usrnm + '&password=' + pwd, 
 
\t \t \t type: 'POST', 
 
\t \t \t data: undefined, 
 
\t \t \t dataType: 'text', 
 
\t \t \t success: function (result) { 
 
\t \t \t \t alert(result); 
 
\t \t \t }, 
 
\t \t \t error: function() { 
 
\t \t \t \t throw new Error("Error processing AJAX on function login()."); 
 
\t \t \t } 
 
\t \t }); 
 
\t } 
 
\t 
 
\t $("#bgFader").hide(); 
 
\t 
 
\t $("#login").click(function() { 
 
\t \t $("#bgFader").show(); 
 
\t \t 
 
\t \t jQuery("<div/>", { 
 
\t \t \t id: "loginBox", 
 
\t \t }).appendTo("body"); 
 
\t \t 
 
\t \t $("#loginBox").html(
 
\t \t \t '<span id = "loginBoxTitle">Login</span><br>' 
 
\t \t \t + '<input type = "text" placeholder = "Username" id = "username"><br><br>' 
 
\t \t \t + '<input type = "password" placeholder = "Password" id = "pwd"><br><br>' 
 
\t \t \t + '<button id = "submitBttn">Submit</button>' 
 
\t \t); 
 
\t \t 
 
\t \t $("#loginBox").center(); 
 
\t }); 
 
\t 
 
\t $("#bgFader").click(function() { 
 
\t \t $("#loginBox").remove(); 
 
\t \t 
 
\t \t $("#bgFader").hide(); 
 
\t }); 
 
\t 
 
\t $("#submitBttn").click(function() { 
 
\t \t user = $("#username").val(); 
 
\t \t pass = $("#pwd").val(); 
 
\t \t login(user, pass); 
 
\t }); 
 
\t 
 
});

#bgFader { 
 
\t opacity: 0.75; 
 
\t position: absolute; 
 
\t top: 0px; 
 
\t left: 0px; 
 
\t width: 100vw; 
 
\t height: 100vh; 
 
\t background-color: black; 
 
} 
 

 
#loginBox { 
 
\t border-radius: 3px; 
 
\t border: 2px solid black; 
 
\t background-color: #fbfbfb; 
 
\t padding: 10px; 
 
} 
 

 
#loginBoxTitle { 
 
\t font-size: 20px; 
 
\t font-weight: bold; 
 
}

<!DOCTYPE HTML> 
 
<HTML lang = "en"> 
 
\t <head> 
 
\t \t <meta charset = "UTF-8"> 
 
\t \t <title title = ""> 
 
\t \t \t 
 
\t \t </title> 
 
\t \t <link rel = "apple-touch-icon" href = ""> 
 
\t \t <link rel = "shortcut icon" href = ""> 
 
\t \t <link rel = "stylesheet" type = "text/css" href = "main.css"> 
 
\t \t <script type = "text/javascript" src = "https://code.jquery.com/jquery-3.1.1.js"></script> 
 
\t \t <script type = "text/javascript" src = "http://www.gigaboywebdesigns.com/GigaboyJS/Gigaboy1.3.3.js"></script> 
 
\t \t <script type = "text/javascript" src = "main.js"></script> 
 
\t </head> 
 
\t <body> 
 
\t \t <button id = "login">Login</button> 
 
\t \t 
 
\t \t <div id = "bgFader">&nbsp;</div> 
 
\t </body> 
 
</HTML>

出典

2016-10-14 Adam Oates

あなたの送信ボタンが存在しない投稿し、それを変換するフォーマットしますされても、PHPで問題ないはずですが、 '$（ '＃submitBttn'）。click ...'を実行すると、最後にボタンのhtmlを挿入するとクリックハンドラがアタッチされなくなります。 –

@MarcBありがとうございます。 –

あなたはloginボタンクリックでDOMに送信ボタンを追加する前に、送信ボタンをあなたの将来へのクリックハンドラを追加します。

は持っている必要があります。

$(document).on('click', '#submitBttn', function() { 
    user = $("#username").val(); 
    pass = $("#pwd").val(); 
    login(user, pass); 
});

代わりの

$("#submitBttn").click(function() { 
    user = $("#username").val(); 
    pass = $("#pwd").val(); 
    login(user, pass); 
});

出典

2016-10-14 15:25:02

変更ボタンのIDをsubmitBttnに

<button id="submitBttn">Login</button>

出典

2016-10-14 15:26:52 Black

Postメソッドは、この

ようにする必要があります0

$(function() { 
      login('userName', 'Password'); 

      function login(usrnm, pwd) { 
       var obj = {}; 
       obj.username = usrnm; 
       obj.password = pwd; 

       $.ajax({ 
        url: 'Login.php', 
        type: 'POST', 
        data: JSON.stringify(obj), 
        contentType: "application/json; charset=utf-8", 
        dataType: "json", 
        success: function(result) { 
         alert(result.d); 
        }, 
        error: function() { 
         throw new Error("Error processing AJAX on function login()."); 
        } 
       }); 
      } 
     });

私はasp.netのWebフォームでそれをテストした...しかし、そのは..Your要求をしたとき

出典

2016-10-14 15:31:40

ログインダイアログが機能しないのはなぜですか？

答えて

関連する問題