javascript - Ajax 调用后提交按钮不起作用

Question

ajax调用后提交按钮不起作用；但是，如果我加载页面，它就可以正常工作。这就是正在发生的事情:我确实有一个模式，显示有关电子邮件更改确认的对话框。如果用户点击确认，则表单提交正常；但是，如果用户单击“否”并继续使用最初保存的电子邮件地址提交表单，但更新不同的表单，则该按钮不会提交任何内容。我必须再次重新加载页面才能使其正常工作。这是上述行为的 JS 代码。

==> 简而言之，我想做的事情如下:如果客户来尝试更改他们的电子邮件地址，模式会弹出一条确认消息(是或否)。如果他们单击"is"，则表单提交正常；但是，如果他们单击“否”并重新输入原始电子邮件，则提交按钮不会提交表单。

$(document).ready(function() {

  window.onload = function() {

    document.getElementById('confirmEmailChange').onclick = function() {
      document.getElementById('updateCustomerInfoFormId').submit();
      return false;
    };
    $('#updateInfoBut').click(function() {

      let currentCustomerEmail = $('#currentCustomerEmail').val();
      let customerEmail = $('#customerEmail').val();

      if (currentCustomerEmail !== customerEmail) {

        $('form[name=update_customer]').submit(function(e) {
          e.preventDefault();
        });

        $.ajax({
          url: "This is our API URL" + customerEmail,
          dataType: 'text',
          success: function(json) {

          },
          statusCode: {
            404: function() {
              $('#customerInfoModal').modal({
                show: true
              });

            },
            200: function() {
              $('#emailAlreadyUsedModal').modal({
                show: true
              });
            }
          }
        });
      }
    });
  }
});

Answer 1

看起来像

$('form[name=update_customer]').submit(function(e) {
    e.preventDefault();
});

阻止表单通过 preventDefault() 调用自行提交。

表单提交的默认操作是提交表单本身，通过阻止默认操作，您基本上告诉表单提交然后停止它提交。

如果你看here ，您会发现将回调传递给submit()本质上是给它一个处理程序而不是提交表单。每次当您尝试以其他方式提交表单时，都会调用该处理程序。