我的AJAX腳本將正常運行一次，但它不會再次運行

Question

所以，我似乎有我的代碼的一些問題。現在我剛開始學習AJAX和jQuery，所以我對它很感興趣。他們的方式在現場的工作原理是：

當用戶點擊登錄按鈕形式將他們輸入用戶名和密碼的按鈕下出現。當用戶點擊登錄我的AJAX腳本將會處理記錄他們，並刷新自己的形象，讓他們知道他們正在登錄。然後，當他們要註銷他們點擊註銷和它記錄出來沒問題。

我遇到的問題是，一旦我通過登錄/註銷過程中，我無法得到的形式而無需刷新頁面再次顯示了運行。

我希望我是有道理= /這裏是我的代碼有：

<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/jscript"></script> 
<script> 
    $(function() { 
    $('form').on('submit', function (e) { 
     $.ajax({ 
     type: 'post', 
     url: 'loginsystem/login.php', 
     data: $('form').serialize(), 
     success: function() { 
      $("#loginForm").slideUp('slow'); 
      $("#playerFace").load('ajaxPHPScripts/getUserAvatar-100px.php'); 
      $("#loginLogout").load('ajaxPHPScripts/loginLogoutButton.php'); 
     } 
     }); 
     e.preventDefault(); 
    }); 
    }); 
function doSomething() { 
    $.ajax({ 
     type: 'get', 
     url: 'loginsystem/logout.php', 
     success: function() { 
      $("#playerFace").load('ajaxPHPScripts/getUserAvatar-100px.php'); 
      $("#loginLogout").load('ajaxPHPScripts/loginLogoutButton.php'); 
     } 
     }); 
} 
$(document).ready(function(){ 
    $("#loginForm").hide(); 
    $("#loginbtn").click(function(){ 
    $("#loginForm").slideToggle('slow'); 
    }); 
}); 
$(document).ready(function() { 
    $("#removeLoginForm").click(function(){ 
     $("#loginForm").slideUp('slow'); 
    }); 
}); 
</script> 

現在的HTML：

<div id="sidebar"> 
      <div id="sidebarinner"> 
       <div id="sidebarInnerInner"> 
        <div id="playerAvatar"> 
         <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
          <tr> 
          <td style="width:100px;" id="playerFace"><img src="https://minotar.net/avatar/steve/100"></td> 
          <td style="text-align:center;"><?php ServerPing(); //pings to see if server is online?></td> 
          </tr> 
         </table> 
        </div> 
        <div id="joinAndLog"> 
         <table width="100%" border="0" cellspacing="0" cellpadding="0" style="text-align:center; height:100%;"> 
          <tr> 
           <td style="width:50%;" id="loginLogout"><?php LoginOrLogout(); ?></td> 
           <td style="width:50%;"><?php SignupOrManageAcc(); ?></td> 
          </tr> 
         </table> 
        </div> 

        <div id="loginForm"> 
         <form class="sideForm" id="testform" style="text-align:center; margin-bottom:10px;"> 
          <input type="text" id="name" name="username" value="" placeholder="Username..."/> 
          <br /> 
          <input type="password" id="pass" name="password" value="" placeholder="Password..."/> 
          <br /> 
          <input id="submit" type="submit" name="submit" value="Login" style="width:25%; cursor:pointer;" /> 
          <input type="reset" name="" value="Cancle" id="removeLoginForm" style="width:25%; cursor:pointer;" /> 
          <br /> 
          <!--a href="#" style="padding:0px; margin:0px;">Forgot Password</a--> 
         </form> 
        </div> 
</div> 

Answer 1

你需要新加載的形式，你做了同樣的方式綁定第一種形式。

所以，你在新的HTML加載後，您需要再次運行是這樣的：

$('form').on('submit', function (e) { 
    $.ajax({ 
    ///// snip ///// 
    }); 
    e.preventDefault(); 
}); 

因爲這裏面的功能是重複的，你還不如外面定義它。

I.e.

var onFormSubmit = function (e) { 
    $.ajax({ 
    ///// snip ///// 
    }); 
    e.preventDefault(); 
} 

我們的形式綁定到功能，你只需要做：

$（ '形式'）上（ '提交'，onFormSubmit）;

Answer 2

如果你動態加載的內容，那麼你需要重新綁定任何靜態的事件處理程序中動態加載的內容的對象，或者您需要使用委託的事件處理程序仍將在動態加載的內容合作。委派的事件處理程序是更優雅的解決方案。

委派的事件處理程序是這樣的：

$('#sidebar').on('submit', '#loginForm', function() {...}); 

理想情況下，你會放一個id（我在代碼示例建議"loginForm"特定的登錄表單和使用而不是"form"目標上選擇器，以便您知道事件處理程序只針對正確的表單

使用綁定到不是動態創建/銷燬的父元素的委託事件處理，而是針對該靜態父級中特定動態內容的選擇項，允許即使是，你也要保持事件處理程序的正常運行目標內容被銷燬並重新加載。

Answer 3

更新代碼：

$(document).ready(function(){ 
$("#loginForm").hide(); 
$("#loginbtn").on('click',function(){ // use .on() method 
$("#loginForm").slideToggle('slow'); 
}); 
}); 
$(document).ready(function() { 
$("#removeLoginForm").on('click',(function(){ // use .on() method 
$("#loginForm").slideUp('slow'); 
}); 
});