javascript - IE 11 仍然在点击处理程序中没有 .submit() 的情况下提交表单

Question

我很难表达我的问题。

基本上，当单击表单中的提交按钮时，我希望禁用该按钮，并将按钮文本替换为很棒的字体图标，直到 POST 请求通过为止。我有以下 jquery。

  $('div').on('click', '.btn-disabler', function() {
    $(this).append("<i class='fa fa-spinner fa-pulse btn-loader'>").disable(true);
    $(this).find('.btn-label').addClass('invisible');
    $(this).css("background-image", "none");
    if ($(this).parents('form') && !$(this).hasClass('btn-facebookauth')) {
      $(this).parents('form').submit();
    }
  });

还有我表单的按钮部分。

<form>
   <button name="button" type="submit" class="btn btn-primary submit-button btn-disabler">
      <span class="btn-label">Log in</span>
   </button>
</form>

我的问题是 IE 11。在使用上述代码的 IE 中，单击后，按钮文本消失，但 fa 图标不显示，按钮只是空白。表格提交正常。

当我删除 if 语句时:

  $('div').on('click', '.btn-disabler', function() {
    $(this).append("<i class='fa fa-spinner fa-pulse btn-loader'>").disable(true);
    $(this).find('.btn-label').addClass('invisible');
    $(this).css("background-image", "none");
  });

按钮正确显示图标并提交表单？当我删除 .submit() 后，为什么表单仍在提交？在 Chrome 中，当我删除 if 语句时，按钮的图标会正确更改，但表单不会提交，它只是挂起(如预期)。

我基本上是在尝试解决在 IE 中单击提交按钮后图标未出现的问题，而在 chrome 中则正常。

Answer 1

Javascript

// wait for document ready before trying to attach listener.
$(document).ready(function() {
  // Add a submit listener to the form
  $('#myform').submit(function(e){
    // save this jquery object into a variable as we might access this a few times. In this case it will be the form.
    var theform = $(this);
    // save the button to a variable.
    var thebtn = theform.find(".btn-disabler");
    // prevent the form from submitting (could also return false at the end of this function)
    e.preventDefault();
    thebtn.append("<i class='fa fa-spinner fa-pulse btn-loader'>").disable(true);
    theform.find('.btn-label').addClass('invisible');
    thebtn.css("background-image", "none");
    if (!thebtn.hasClass('btn-facebookauth')) {
      theform.submit();
    }
  });
});

html

<form id="myform">
   <button name="button" type="submit" class="btn btn-primary submit-button btn-disabler">
      <span class="btn-label">Log in</span>
   </button>
</form>

以上均未经测试