Jquery post - Form提交取消 - Jquery post - Form submit cancelling

我的小web应用程序遇到了麻烦。我想禁用表单的提交功能。

目前它的工作原理是这样的:首先你点击登录按钮，这工作得很好。阿贾克斯在做他的工作。然后单击logout按钮，第一次单击它就会得到一个类似get方法的操作(这是不应该发生的)。然后我试着再次点击它，它完美地注销了我。当我尝试再次登录时，它与注销按钮相同。第一次不成功，第二次就成功了。

index . php:

<?php
session_start();
require 'database.php';
$nowDate = date('d-m-Y h:i:s');
?>
<html>
  <head>
    <title>Chat</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
    <!-- Local scripts <3 -->
    <script src="code.js" type="text/javascript"></script>
    <link href="style.css" rel="stylesheet" type="text/css"/>
  </head>
  <body>
    <div class="container">
      <div class="chatbox" id="chatbox">
        <div class="errorbox" style="display: none;">
          <div class="alert alert-danger fade in">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            <strong>Oh oh!</strong> <span id="errorMessage"></span>
          </div>
        </div>
        <div class="successbox" style="display: none;">
          <div class="alert alert-success fade in">
            <a href="#" class="close" data-dismiss="success" aria-label="close">&times;</a>
            <strong>Yay!</strong> <span id="successMessage"></span>
          </div>
        </div>
        <?php
        if (!isset($_SESSION['username'])) {
          ?>
        <div class="loginbox">
          <form class="post">
            <div class="form-group">
              <label for="un">Username:</label>
              <input type="text" class="form-control" name="un" id="un">
            </div>
            <div class="form-group">
              <label for="pw"><span class="important">*</span> Password:</label>
              <input type="password" class="form-control" name="pw" id="pw">
            </div>
            <button type="submit" class="btn btn-default login-button" name="login" value="Log in">Log in</button>
            <h6><span class="important">*</span> - Only needed when you have a reserved username!</h6>
          </form>
        </div>
        <?php } else { ?>
        <div class="logout">
          <form class="post">
            <button type="submit" class="btn btn-default logout-button" name="logout" value="Log out">Log out</button>
          </form>
        </div>
        <div class="choosebox">
            <?php
            $statement = $connection->prepare('SELECT id,chat_name,max_users,admin_only,online_users FROM chats');
            $statement->bind_result($id, $chat_name, $max_users, $admin_only, $online_users);
            $statement->execute();
            //if ($statement->fetch()) {
            echo '<table class="table">';
            echo '<tr><th>Chat name</th><th>Users</th><th></th></tr>';
            while ($statement->fetch()) {
              echo '<tr>';
              if ($admin_only === 1) {
                if (isset($_SESSION['admin']) && $_SESSION['admin'] === 1) {
                  echo '<td>' . $chat_name . ' <span class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span></td>';
                } else {
                  echo '<td>' . $chat_name . ' <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span></td>';
                }
              } else {
                echo '<td>' . $chat_name . '</span></td>';
              }
              if ($max_users === 0) {
                $maxus = '&#8734;';
              } else {
                $maxus = $max_users;
              }
              echo '<td>' . $online_users . '/' . $maxus . '</td>';
              echo '<td>'
              . '<form class="post">'
              . '<button type="submit" class="btn btn-default" name="joim" value="Join">Try to join</button>'
              . '</form>'
              . '</td>';
              echo '</tr>';
            }
            echo '</table>';
            ?>
        </div>
        <div class="chat">        
        </div>
        <?php } ?>
      </div>
    </div>
    <script>
    </script>
  </body>
</html>

code.js:

/* Piece that acts weird */
$(document).ready(function () {
  $(".post").submit(function (e) {
    e.preventDefault();
    e.returnValue = false;
    return false;
  });
  $(".post").submit(function(e){
    e.preventDefault();
    e.stopPropagation();
  });
  $(".post").bind('submit', function (e) {
    e.preventDefault();
    e.returnValue = false;
    return false;
  });
  $(".logout-button").click(function (e) {
    $.post("logout.php", {logout: 'Log out'}, function (data, status) {
      if (status === 'success') {
        $("#chatbox").load(location.href + " #chatbox");
        $("#chatbox").load(location.href + " #chatbox");
      }
    });
    e.preventDefault();
    return false;
  });
  $(".login-button").click(function (e) {
    console.log('login');
    $.post("login.php", {login: 'Log in', pw: $("#pw").val(), un: $("#un").val()}, function (data, status) {
      if (status === 'success') {
        if (data !== '') {
          $(".errorbox").fadeOut();
          $("#errorMessage").html(data);
          $(".errorbox").fadeIn();
        } else {
          $("#chatbox").load(location.href + " #chatbox");
        }
      }
    });
    e.preventDefault();
    return false;
  });
});

如果你还想知道什么，你可以问我。

编辑:如果您想测试它(只需忽略密码字段):ianketje.com/chat

编辑2:我发现了这个bug，似乎是我的脚本被忽略了，一旦我重置了"chatbox"div。对此的任何答案都将是有帮助的<3

try

$('body').on('submit' , '.post' , funtion(e) {
    e.preventDefault()
    # the rest
})

我稍微简化了你的代码。我删除了额外的提交按钮，因为当用户单击提交按钮时，您已经在执行代码了。我删除了所有返回false语句，并将e.p preventdefault()函数调用移到了事件的顶部。这样他们就可以防止默认导航。我将以下html放在login.php文件中，以便在服务器上进行测试。

    <div class="logout">
          <form class="post" method="post">
 <button type="submit" class="btn btn-default logout-button" name="logout" value="Log out">Log out</button>
          </form>
        </div>   
<div class="choosebox">
            <table class="table"><tbody><tr><th>Chat name</th><th>Users</th><th></th></tr><tr><td>The admin hole <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span></td><td>0/∞</td><td><form class="post"><button type="submit" class="btn btn-default" name="joim" value="Join">Try to join</button></form></td></tr><tr><td>The non-admin hole</td><td>0/50</td><td><form class="post"><button type="submit" class="btn btn-default" name="joim" value="Join">Try to join</button></form></td></tr></tbody></table>          </div>

为code.js修改的JavaScript:

//Changed the beginning of this function call to prevent conflicts
//with any other javascript libraries loaded.
jQuery(document).ready(function ($) {

    $(".logout-button").click(function (e) {
        e.preventDefault();
        console.log("logging out");
      $.post("logout.php", { logout: 'Log out' }, function (data, status) {

      if (status === 'success') {
          $("#chatbox").load(location.href + " #chatbox");
      }
    });


    });
  $(".login-button").click(function (e) {
      e.preventDefault();
      console.log("login");
    $.post("http://localhost/login.php", {login: 'Log in', pw: $("#pw").val(), un: $("#un").val()}, function (data, status) {
      if (status === 'success') {
        if (data !== '') {
          $(".errorbox").fadeOut();
          $("#errorMessage").html(data);
          $(".errorbox").fadeIn();
        } else {
          $("#chatbox").load(location.href + " #chatbox");
        }
      }
    });

  });
});