我有一个引导popover表单,它有几个输入文本字段和一个提交按钮。弹出窗口与输入文本字段一起显示得很好,但当单击提交按钮时,根本不会阻止默认操作。我也尝试过登录表单提交,但根本没有记录任何内容。我认为原因与popover以及它们最初是如何实现的有关。
<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
实际上被克隆并注入到<div>
(即.popover
本身)内的DOM中。因此,您的submit()
永远不会绑定到popover中显示的表单,因为它是稍后添加的。如果您将事件绑定到document
作为委托的事件处理程序,那么它也将使用.popover
中显示的表单:
$(document).on('submit','form',function(){
alert('form submitted');
//prevent -> return false
return false;
});
演示->http://jsfiddle.net/r1q6qjpo/
注意:.hide
已弃用:
.hide可用,但它并不总是影响屏幕阅读器和自v3.0.1起已弃用。只能使用.hidden或.sr。