我的自定义仪表板的按钮既包含“真棒字体”图标,又包含按钮或表单操作的文本描述。我的表单和按钮存在问题,即单击具有jQuery click事件的按钮中的字体真棒图标时,表单无法提交。我可以使用一些帮助找出我做错了什么。
[如果我单击按钮上的任意位置,我的jQuery可以正常工作,方法是将按钮的内部HTML替换为字体真棒图标微调器图标和文本“ Searching ...”。如果我直接单击字体超赞图标,则表单不会提交。如果我单击字体真棒图标以外的按钮上的其他任何位置,则表单将正确提交。如果删除单击按钮时将替换innerHTML的jQuery click()函数,则即使直接单击字体真棒图标也可以正确提交表单。它与jquery点击html代码有关,但是我不确定我做错了什么。
我的jQuery有什么问题,当在按钮中单击真棒字体图标时,导致表单无法提交?
这是此搜索按钮的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>
任何建议将不胜感激。如果需要更多信息或澄清,请告诉我,我将进行更新。谢谢。
所以基本上您需要
type
从submit
更改为按钮。所以您的代码库应该是这样的:
$(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>
此问题是由于在可以分派click
事件之前,停止了submit
事件的传播。由于click
事件(<i class="fas fa-search">
)的来源不再有效,因此使用$(this).html()
从DOM中将其删除时,
要解决该问题,您只需更改图标元素的类名称。然后将文本包装在span
中,以仅更改span
中的文本。
jQuery(function($){
$('#search-btn').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 */
$('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>
<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>
<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>
在所有代码段中,我都禁用了实际的表单提交,否则您将看不到按钮的更改。确保不要使用
DEMO PURPOSES ONLY
下面的JavaScript由于没有注册就无法使用fontawesome 5的CDN,因此我使用了fontawesome 4 CDN和fa
类名称来生成图标。