我的 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

如果您正在动态加载内容，那么您需要将静态事件处理程序重新绑定到动态加载内容中的对象，或者您需要使用仍可处理动态加载内容的委托事件处理程序。委托事件处理程序是更优雅的解决方案。

委托的事件处理程序如下所示：

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

理想情况下，您应该在特定的登录表单上放置一个 id（我在我的代码示例中建议 "loginForm" 并使用它而不是 "form" 作为目标选择器，这样您就知道事件处理程序只针对正确的表单。

使用绑定到非动态创建/销毁的父元素的委托事件处理，但针对该静态父元素内的特定动态内容的选择允许您保持事件处理程序有效，即使目标内容是销毁然后重新加载。

Answer 2

您需要像第一个表单一样绑定新加载的表单。

所以，在你加载新的 HTML 之后，你需要再次运行这样的东西：

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

由于这个内部函数是重复的，所以你不妨在外部定义它。

即

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

现在要将表单绑定到该函数，您只需执行以下操作：

$('form').on('submit', onFormSubmit);

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