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

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，然后调用 updateViewing-helper.php通过 AJAX，然后我可以检查服务器端是否匹配密码。

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

Answer 1

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

首先给表单提供id

<form id="myForm">

然后调用此 id 上的提交

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

    });
});