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

我的ajax脚本将正确运行一次，但它不会再运行

3 个答案: