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>

以上所有内容均未经测试

Answer 2

提交按钮应该提交表单，因此它在IE中按预期工作。如果要通过form.submit（）手动提交表单，请使用按钮类型的按钮。

＆＃13;

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

＆＃13;

IE 11仍然在单击处理程序中提交没有.submit（）的表单

2 个答案: