Кнопка подтверждения не работает после вызова Ajax

Question

Кнопка отправки не работает после вызова ajax;Однако, если я загружаю страницу, она работает нормально.Это то, что происходит: у меня есть модальное окно, которое показывает диалог о подтверждении изменения электронной почты.Если пользователь нажимает «Подтвердить», то форма отправляется в порядке;однако, если пользователь нажимает кнопку «Нет» и продолжает и отправляет форму с первоначально сохраненным адресом электронной почты, но обновляет другие формы, кнопка ничего не отправляет.Я должен был бы перезагрузить страницу снова, чтобы она заработала.Вот код JS для вышеуказанного поведения.

==> В двух словах, я пытаюсь сделать следующее: если клиент приходит и пытается изменить свой адрес электронной почты, модальное окно всплывает сподтверждающее сообщение (да или нет).Если они нажимают «да», то форма отправляется в порядке;однако, если они нажимают кнопку «Нет» и повторно вводят свой исходный адрес электронной почты, кнопка «Отправить» не отправляет форму.

$(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() вызов.

Действие отправки по умолчанию по умолчанию - отправка самой формы путем предотвращениядействие по умолчанию, которое вы в основном указываете форме для отправки, затем прекращаете ее отправку.

Если вы посмотрите на здесь , вы обнаружите, что передача обратного вызова для submit () по сути дает ему обработчиквместо того, чтобы отправить форму.И обработчик будет вызываться каждый раз, когда вы пытаетесь отправить форму другими способами.

Answer 2

Я понял это, переместив e.preventDefault(); внутри функции оператора if и вручную отправив кнопку за пределы вызова ajax, когда модальное подтвердится.Прекрасно работает следующее:

   $(document).ready(function(){

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

  $('#updateInfoBut').on('click', function(e) {
    let currentCustomerEmail = $('#currentCustomerEmail').val();
    let customerEmail = $('#customerEmail').val();
        if(currentCustomerEmail !== customerEmail){
          e.preventDefault();
          $.ajax({
               url:"API LINK GOES HERE" + customerEmail,
               dataType: 'text',
               success:function(json){
               },
               statusCode: {
               404: function() {
                 $('#customerInfoModal').modal({show: true});

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

               }
                }
          });

        } 
  });

});