为什么用 `$("#submitButton").submit(function(){})` 绑定提交事件不起作用？

Question

我想弄清楚为什么$("#submitButton").submit(function() {}); 不管用。

我有这个<form> ：

<div class="card p-2">
  <form>
    <div class="input-group">
      <label for="inputPasswordAgain" class="sr-only">Password</label>
      <input type="password" id="inputPasswordAgain" class="form-control" placeholder="Please enter your password again!" required>

      <div class="input-group-append">
        <button type="submit" id="submitButton" name="submitButton" class="btn btn-secondary btn-block">Submit Changes</button>
      </div>
    </div>
  </form>
</div>

我已经在 jQuery 中编写了这个 AJAX 代码来将值传递给服务器。

<script type="text/javascript">
  $(document).ready(function() {
    $("#submitButton").click(function() {
      var data = {};
      var i;

      for (i = 0; i < $("#sessionQuantity").html(); i++) {
        data[i] = $("#" + i).val();
      }

      $.ajax({
        type: "POST",
        url: "updateViewing-helper.php",
        data: data,
        success: function() {}
      });
    });
  });
</script>

如果我使用.click(function(){ … })一切正常，但这将调用updateViewing-helper.php而不提交带有<input>和<button>元素的表单。 这意味着用户可以跳过输入密码，只需单击按钮即可。

我尝试使用.submit(function(){ … }) ，然后使用e.preventDefault() ，然后将所有值传递到 AJAX，然后通过 AJAX 调用updateViewing-helper.php ，然后我可以检查密码匹配服务器-边。

但是.submit事件不起作用：没有警报或任何东西。

Answer 1

在表单上调用提交而不是在按钮上

首先给表单 id

<form id="myForm">

然后在这个 id 上调用 submit

$( document ).ready(function() {
   $("#myForm").submit(function(){

    });
});