Исходное сообщение
В моей пользовательской панели инструментов есть кнопки, содержащие значок Font Awesome и текстовое описание действия кнопки или формы. У меня проблема с моими формами и кнопками, которую форма не отправляет после нажатия на значок с отличным шрифтом внутри кнопки, в которой есть событие нажатия jQuery. Я мог бы использовать некоторую помощь в выяснении того, что я делаю неправильно.
В этом примере изображения есть значок «поиска» с увеличительным стеклом, за которым следует текст «Поиск».
Если я щелкну где-нибудь на кнопке, мой jQuery будет работать правильно, заменив внутреннюю HTML кнопки на значок со значком «Прекрасный значок» и текстом «Поиск ...». , Если я нажимаю прямо на значок шрифта, форма не отправляется. Если я щелкну где-нибудь еще на кнопке, кроме значка «шрифт», форма будет отправлена правильно. Если я удаляю свои функции jQuery click (), которые заменяют внутренние HTML при нажатии кнопок, форма отправляется должным образом, даже если щелкнуть по значку шрифта awesome непосредственно. Это как-то связано с кодом 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>
Буду признателен за любой совет. Если требуется дополнительная информация или разъяснения, пожалуйста, дайте мне знать, и я буду обновлять. Спасибо.
Обновление 1/6/2020
Пример: https://www.seibertron.com/dashboard/test/button-problem-public.php
Проблема в приведенном выше примере с кнопкой «поиск». Если вы щелкнете по правой стороне кнопки, она будет работать как положено (со значком счетчика и изменением текста с «Поиск» на «Поиск ...»). Если вы нажмете на значок увеличительного стекла с удивительной шрифтом в левой части кнопки «Поиск», он не будет отправлен. Кнопка сброса работает в этом примере, потому что она просто использует традиционный javascript для перенаправления пользователя и не отправляет форму. Заранее спасибо за внимание к этой проблеме!
Обновление и разрешение 1/6/2020
Благодаря fyrye я принял его предложение и изменил мои кнопки. js jQuery file to следующий, который работал для моей пользовательской панели инструментов Inspinia. Кроме того, когда я исследовал эту проблему вчера вечером, я наткнулся на альтернативное решение, встроенное в Bootstrap, которое может работать для других пользователей, желающих добавить эту функцию в свой код: Как добавить значок счетчика в кнопка, когда она находится в состоянии загрузки?
Удачного кодирования!
$(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);
});
});