jquery - 单击带有很棒字体图标的按钮时，表单不会提交

Question

原帖

我的自定义仪表板有一些按钮，其中包含 Font Awesome 图标以及按钮或表单操作的文本说明。我的表单和按钮有一个问题，当单击具有 jQuery 单击事件的按钮内的 font Awesome 图标时，表单不会提交。我需要一些帮助来找出我做错了什么。

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

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

我的 jQuery 做错了什么，导致在按钮内单击 font Awesome 图标时表单无法提交？

此图显示 jQuery 正确替换了按钮的内部 HTML，但直接单击 font Awesome 图标时表单不会提交。仅当在其他任何地方单击按钮(直接单击 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，我采纳了他的建议，并将我的 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

该问题是由 click 的传播引起的事件在 submit 之前被停止可以调度事件。自click来源当使用 <i class="fas fa-search"> 从 DOM 中删除事件 ( $(this).html() ) 时，它不再有效,

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