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 调用期间没有被替换的两个按钮的任何父级会很好）并委托它对于相应的按钮，您的事件处理程序已附加，即使其中一个按钮不在文档中 yet.

希望对您有所帮助！

jQuery Ajax 脚本互相淘汰

jQuery Ajax scripts knock out each other

javascript

php

ajax

jquery

mysqli