我的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'); 
}); 
});