Bootstrap всплывающая форма не отправляется с использованием AJAX
У меня есть всплывающая форма начальной загрузки, которая имеет несколько полей ввода текста и кнопку отправки. Всплывающее окно отображается хорошо с полями ввода текста, но при нажатии кнопки отправки действие по умолчанию не предотвращается вообще. Я также попытался войти в форму отправки, но ничего не регистрирует вообще. Я думаю, что причина связана с поповерами и тем, как они реализованы в первую очередь.
<a href="#" id="popover" class="button blue">Create</a>
<div id="popover-head" class="hide"><h4>Create</h4></div>
<div id="popover-content" class="hide">
<form method="post">
<p><input type="text" id="name" name="name"></p>
<p><input type="text" id="tel" name="tel"></p>
<input type="submit" id="submit">
</form>
</div>
JQ:
$('#popover').popover({
html: true,
placement: 'right',
title: function () {
return $("#popover-head").html();
},
content: function () {
return $("#popover-content").html();
}
});
$('form').submit(function(){
alert('form submitted');
return false;
});
Любой, у кого есть чёткая идея, может помочь. Благодарю.
Решение
Причина в том, что ваш .popover-content на самом деле клонируется и вводится в DOM внутри <div>, .popover сам. Так что ваши submit() никогда не привязывается к форме, показанной внутри поповера, так как он добавляется позже. Если вы связываете событие с document как обработчик делегированного события, он будет работать с формой, показанной внутри .popover тоже :
$(document).on('submit','form',function(){
alert('form submitted');
//prevent -> return false
return false;
});
демо -> http://jsfiddle.net/r1q6qjpo/
Заметка: .hide устарела :
.скрытие доступно, но это не всегда влияет на программы чтения с экрана и
устарело с версии 3.0.1. Вместо этого используйте .hidden или .sr-only.
Другие решения
Других решений пока нет …