单击带有超赞字体图标的按钮时，表单不会提交

Question

原版Post

我的自定义仪表板的按钮包含 Font Awesome 图标和按钮或表单操作的文本描述。我的表单和按钮有问题，在单击具有 jQuery 单击事件的按钮中的超赞字体图标后，表单不会提交。我需要一些帮助来找出我做错了什么。

在这个图片示例中，有一个很棒的字体放大镜 "search" 图标，后面是文本 "Search"。

如果我单击按钮上的任意位置，我的 jQuery 将正常工作，方法是将按钮的内部 HTML 替换为字体精美的图标微调器图标和文本 "Searching ..."。如果我直接点击 font awesome 图标，表单不会提交。如果我单击按钮上除字体真棒图标之外的任何其他位置，表单将正确提交。如果我在单击按钮时删除替换内部 HTML 的 jQuery click() 函数，即使直接单击字体真棒图标，表单也会正确提交。它与 jquery click html 代码有关，但我不确定我做错了什么。

我的 jQuery 做错了什么导致在单击按钮中的超赞字体图标时无法提交表单？

此图显示 jQuery 正确替换了按钮内部的 HTML，但是当直接点击 font awesome 图标时表单没有提交。只有在除直接在字体真棒图标上以外的任何其他地方单击按钮时，才会提交表单。

这是我的 jQuery 和 HTML 这个搜索按钮

$(document).ready(function() {
  $('#search-btn').click(function() { 
    $(this).html('<i class="fas fa-spinner fa-spin gap-right"></i> Searching ...'); 
  });
  //$('#search-btn').click(function() { $('#search-btn').html('<i class="fas fa-spinner fa-spin gap-right"></i> Searching ...'); });
});

<link href="https://fontawesome.com/v4.7.0/assets/font-awesome/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="submit" id="search-btn" name="search" value="Search" class="btn btn-primary gap-right"><i class="fas fa-search gap-right"></i> Search</button>

如有任何建议，我们将不胜感激。如果需要更多信息或说明，请告诉我，我会更新。谢谢。

2020 年 1 月 6 日更新

示例：https://www.seibertron.com/dashboard/test/button-problem-public.php

上例中的问题与 "search" 按钮有关。如果单击按钮的右侧，它会按预期工作（带有微调器图标并将文本从 "Search" 更改为 "Searching ..."）。如果您单击“搜索”按钮左侧字体超棒的放大镜图标，它不会提交。重置按钮在示例中有效，因为它只是使用传统的 javascript 来重定向用户，而不是提交表单。预先感谢您查看此问题！

更新和解决方案 1/6/2020

感谢 fyrye，我采纳了他的建议并将我的 buttons.js jQuery 文件修改为以下内容，这适用于我的自定义 Inspinia 仪表板。此外，当我昨晚研究这个问题时，我遇到了一个内置于 Bootstrap 中的替代解决方案，它可能适用于希望将此功能添加到他们的代码中的其他用户：How to add a spinner icon to button when it's in the Loading state?

编码愉快！

$(document).ready(function(){
  $('form').on('submit', function(e) {
    $(this).find('#test-search-btn').html('<i class="fa fas fa-spinner fa-spin gap-right"/> Searching...');
    $(this).find('#search-btn').html('<i class="fa fas fa-spinner fa-spin gap-right"/> Searching...');
    $(this).find('#add-btn').html('<i class="fas fa-spinner fa-spin gap-right"></i> Adding ...');
    $(this).find('#approve-btn').html('<i class="fas fa-spinner fa-spin gap-right"></i> Saving ...');
    $(this).find('#save-btn').html('<i class="fas fa-spinner fa-spin gap-right"></i> Saving ...');
    $(this).find('#copy-btn').html('<i class="fas fa-spinner fa-spin gap-right"></i> Copying ...');
    $(this).find('#move-btn').html('<i class="fas fa-spinner fa-spin gap-right"></i> Moving ...');
    $(this).find('#upload-btn').html('<i class="fas fa-spinner fa-spin gap-right"></i> Uploading ...');
    $(this).find('#nav-refresh-btn').html('<i class="fas fa-refresh fa-lg fa-spin gap-right"></i>');
    $(this).find('#load-btn').html('<i class="fas fa-spinner fa-lg fa-spin gap-right"></i> Loading ...');
    $(this).find('#generate-btn').html('<i class="fas fa-spinner fa-lg fa-spin gap-right"></i> Generating ...');
  });

  $('#cancel-btn').click(function() { $(this).html('<i class="fas fa-spinner fa-spin gap-right"></i> Canceling ...'); });
  $('#reset-btn').click(function() { $(this).html('<i class="fas fa-spinner fa-spin gap-right"></i> Resetting ...'); });

  $('.button-save').click(function() { $(this).html('<i class="fas fa-spinner fa-spin gap-right"></i> Saving ...'); });
  $('.button-go-back').click(function() { $(this).html('<i class="fas fa-spinner fa-spin gap-right"></i> Loading ...'); });
  $('.button-sm-edit').click(function() { $(this).html('<i class="fas fa-spinner fa-spin fa-lg" title="Loading ..."></i>'); });
  $('.button-sm-delete').click(function() { $(this).html('<i class="fas fa-spinner fa-spin fa-lg" title="Deleting ..."></i>'); });
  $('.button-sm-build').click(function() { $(this).html('<i class="fas fa-spinner fa-spin fa-lg" title="Building ..."></i>'); });
  $('.button-sm-code').click(function() { $(this).html('<i class="fas fa-spinner fa-spin fa-lg" title="Generating ..."></i>'); });

  $('#navbar-toggle-btn').click(function(e) {
    $(this).html('<i class="fas fa-spinner fa-spin" title="Loading ..."></i>');
    setTimeout(
        function () {
          $('#navbar-toggle-btn').html('<i class="fas fa-bars"></i>');
        }, 500);
  });
});

Answer 1

所以基本上你需要

将 type 从 submit 更改为 button。
通过添加和删除更改图标 class。
稍后以编程方式提交表单。

所以你的代码可以是这样的：

$(document).ready(function(){
 $('#search-btn').on('click', function() {
     $(this).find('.fa').addClass('fa-spinner fa-spin').removeClass('fa-search'); // change icon
        setInterval(function(){ document.querySelector('#demo').submit(); }, 2000); // submit the form after two seconds
   });    
});

.gap-right {margin-right: 10px;}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="demo">
  <button type="button" id="search-btn" name="search" value="Search" class="btn btn-primary gap-right"><i class="fa fa-search gap-right"></i> Search</button>
</form>

注意：此演示使用 FA v4*，因此我将 .fas 更改为 .fa 以使其正常工作。

注2：非常感谢@fyrye。

这是有效的旧答案，但会影响 html5 验证，因为它使用 preventDefault() 方法。您可以阅读更多相关信息 here - 基本上您应该避免阻止浏览器的默认行为，除非它是必须的。

$(document).ready(function(){
  $('#search-btn').click(function(e) { 
    e.preventDefault();   //  cancel submit action
    $(this).html('<i class="fa fa-spinner fa-spin gap-right"></i> Searching ...');  // change text
    setInterval(function(){ document.forms[0].submit(); }, 2000); // submit after two seconds
  });    
});

.gap-right {margin-right: 10px;}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form name="demo">
  <button type="submit" id="search-btn" name="search" value="Search" class="btn btn-primary gap-right"><i class="fa fa-search gap-right"></i> Search</button>
</form>

Answer 2

问题是由于 click 事件的传播在调度 submit 事件之前被停止。由于 click 事件的来源 (<i class="fas fa-search">) 不再有效，当使用 $(this).html()、

从 DOM 中移除时

要解决此问题，您只需更改图标元素的 class 名称即可。然后将您的文本包裹在 span 中，以允许您仅更改 span.

中的文本

jQuery(function($) {
    $('#search-btn').on('click', function() {
        $(this).find('.fas')
            //add the spinner icon
            .addClass('fa-spinner fa-spin')
            //remove the search icon
            .removeClass('fa-search')
            //update the text
            .next().text('Searching...');
    });
    
    /* DEMO PURPOSES ONLY - do not use below */
    $('#search-form').on('submit', function(e) {
       e.preventDefault();
       window.alert('Form submitted successfully.');
    });
    /* END DEMO PURPOSES ONLY */
});

.gap-right {
   margin-right: 10px;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

<form id="search-form" action="about:blank">
  <button type="submit" id="search-btn" name="search" value="Search" class="btn btn-primary gap-right">
    <i class="fas fa fa-search gap-right"></i> 
    <span>Search</span>
  </button>
</form>

或者，您可以监视表单的 submit 事件并完全更改按钮。

jQuery(function($) {
    $('#search-form').on('submit', function(e) {
       $(this).find('#search-btn')
           .html('<i class="fa fas fa-spinner fa-spin gap-right"/> Searching...');
       
       /* DEMO PURPOSES ONLY - do not use below */
       e.preventDefault();
       window.alert('Form submitted successfully.');
       /* END DEMO PURPOSES ONLY */
    });
});

.gap-right {
   margin-right: 10px;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

<form id="search-form" action="about:blank">
  <button type="submit" id="search-btn" name="search" value="Search" class="btn btn-primary gap-right">
    <i class="fas fa fa-search gap-right"></i> Search
  </button>
</form>

In all of the snippets, I disabled the actual form submission, otherwise you would not see the button change. Be sure to not use the JavaScript below DEMO PURPOSES ONLY
Since a CDN of fontawesome 5 is not available without registering, I used the fontawesome 4 CDN and the fa class name to generate the icons.

单击带有超赞字体图标的按钮时，表单不会提交

Form doesn't submit when button with font awesome icon is clicked on

html

forms

jquery

button

font-awesome