如何避免执行表单操作的表单外的HTML按钮

Question

我在表单外部有一个按钮，它触发了一些jQuery，但由于某种原因，它也执行表单的操作。

我检查了这篇文章， 即使在表单之外也执行了表单操作，但是我没有引起问题的同一件事。

<form action="edit.php" method="post">
   <div class="table">
       <table cellspacing="0">
           <tr class="top">
              <th>Titel</th>
              <th>Auteur</th>
              <th>ISBN13</th>
              <th>Uitgever</th>
              <th>Pagina's</th>
              <th>ID</th>
              <th></th>
              <th></th>
           </tr>
       <?php

       $sql = "SELECT * FROM books";
       $result = $conn->query($sql);

       if ($result->num_rows > 0){
          while($row = $result->fetch_assoc()){
             ?> 
             <tr>
                <th><?php echo $row['title']; ?></th>
                <th><?php echo $row['author']; ?></th>
                <th><?php echo $row['isbn13']; ?></th>
                <th><?php echo $row['publisher']; ?></th>
                <th><?php echo $row['pages']; ?></th>
                <th><?php echo $row['id']; ?></th>
                <th><a href="edit.php?id=<?php echo $row['id']; ?>">Edit</a?</th>
                <th>
                   <form action="common/delete.php" method="post">
                      <button type="submit" name="delete">Delete</button>
                      <input type="hidden" name="id" value="<?php echo $row['id']; ?>">
                   </form>
                </th>
              </tr>
              <?php
           }
        } else {
            echo "Sorry, maar er zijn nog geen boeken in het assortiment.";
        }

        $conn->close();
        ?>
        </table>
    </div>
</form>
<button class="cancel2">Annuleren</button>

在我将所有代码添加到表中之前，jQuery一直有效，但它仍然起作用，但是它甚至还会将您发送到edit.php，甚至在表格之外

Answer 1

该按钮没有其他功能，因此已自动分配给该表单。

$(document).on("submit","#list",function(e){
   e.preventDefault();
});

通过添加此选项，它将禁用按钮的默认提交功能，确保仅激活了jquery，而没有其他任何动作。