单击带有字体真棒图标的按钮时，表单不提交

Question

原帖

我的自定义仪表板具有包含 Font Awesome 图标和按钮或表单操作的文本描述的按钮。我的表单和按钮存在问题，在单击具有 jQuery 单击事件的按钮中的超棒字体图标时，表单未提交。我可以使用一些帮助来找出我做错了什么。

在这个图像示例中，有一个字体很棒的放大镜“搜索”图标，后面是文本“搜索”。

如果我单击按钮上的任意位置，我的 jQuery 将通过将按钮的内部 HTML 替换为字体真棒图标微调器图标和文本“正在搜索...”来正常工作。如果我直接点击字体真棒图标，表单不会提交。如果我单击按钮上除字体真棒图标之外的任何其他位置，则表单将正确提交。如果我删除了在单击按钮时替换 innerHTML 的 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

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

---

更新和决议 2020 年 1 月 6 日

感谢 fyrye，我采纳了他的建议并将我的 button.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

所以基本上你需要

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

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

$(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 中移除时，

要解决此问题，您只需更改图标元素的类名即可。然后将您的文本包装在 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>

在所有的 sn-ps 中，我禁用了实际的表单提交，否则您将看不到按钮更改。一定不要使用下面的 JavaScript DEMO PURPOSES ONLY
由于没有注册就无法获得 fontawesome 5 的 CDN，因此我使用了 fontawesome 4 的 CDN 和 fa 类名来生成图标。