0

所以我的代码似乎有一些问题。现在我刚刚开始学习 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>
4

3 回答 3

1

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

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

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

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

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

于 2013-10-15T04:49:43.527 回答
0

您需要以与第一个表单相同的方式绑定新加载的表单。

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

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

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

IE

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

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

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

于 2013-10-15T04:46:29.773 回答
0

更新代码：

$(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');
});
});
于 2013-10-15T05:05:06.437 回答