jQuery Ajax 脚本相互淘汰

Question

我的代码有点问题。我想制作一个不需要刷新页面的基于 ajax 的网站。但是两个 js 互相击倒或出现问题，因为我可以登录但是当我尝试注销时，什么都没有发生，但是如果我刷新（并且我仍然登录）我可以注销但现在登录表单出现我无法登录。这是我的 JavaScript 代码。

$(document).ready(function() {
    $(".login").click(function() {
        var dataString = $("#loginform").serialize();
        $.ajax({
            type: "POST",
            url: "checklogin.php",
            data: dataString,
            cache: false,
            success: function(html) {
                $("#pirossavon").html(html);
                $('#content').load(document.URL + ' #content');
            }
        });

    });
});


$(document).ready(function() {
    $(".logout").click(function() {

        $.ajax({
            type: "POST",
            url: "checklogin.php",
            data: "logout=1",
            cache: false,
            success: function(html) {
                $("#pirossavon").html(html);
                $('#content').load(document.URL + ' #content');
            }
        });

    });
});

如您所见，在成功完成 ajax 之后，我正在重新加载标题（登录表单和登录详细信息在哪里）和我网站的内容 div。

Answer 1

在进行任何 AJAX 调用之前，两个脚本标签都在文档中吗？

问题可能是您没有使用delegated events。

$(document).ready(function() {
  $(document).on('click', '.login', function() {

    // AJAX

  });
});

$(document).ready(function() {
  $(document).on('click', '.logout', function() {

    // AJAX

  });
});

由于在登录之前不存在注销按钮，因此您的事件处理程序未附加到任何对象。刷新后，事件被附加，但现在登录按钮没有事件处理程序。所以你可以注销，但现在你不能登录。通过将事件附加到文档（或者在 AJAX 调用期间没有被替换的两个按钮的任何父级都很好）并将其委托给相应的按钮，您的事件处理程序已附加，即使其中一个按钮尚未出现在文档中。

希望这会有所帮助！