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

Question

原帖

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

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

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

当在按钮内单击字体真棒图标时，我的 jQuery 导致表单无法提交，我做错了什么？

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

这是我用于此搜索按钮的 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 来重定向用户，而不是提交表单。 预先感谢您查看此问题！

---

更新和决议 1/6/2020

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

快乐编码！

 $(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

该问题是由在可以调度submit事件之前停止click事件的传播引起的。 由于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>

在所有片段中，我禁用了实际的表单提交，否则您将看不到按钮更改。 确保不要使用下面的 JavaScript DEMO PURPOSES ONLY用于DEMO PURPOSES ONLY
由于fontawesome 5的CDN不注册是无法使用的，所以我使用了fontawesome 4 CDN和fa类名来生成图标。

Answer 2

所以基本上你需要

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() 方法。 你可以在这里阅读更多关于它的信息——基本上你应该避免阻止浏览器的默认行为，除非它是必须的。

 $(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>