如何防止表单在引导弹出窗口中提交？答案

【问题标题】：How to prevent form from submitting when within bootstrap popover?如何防止表单在引导弹出窗口中提交？
【发布时间】：2014-05-30 07:49:13
【问题描述】：

我遇到了一个问题，希望有人能澄清一下。我正在使用引导弹出窗口来触发登录表单。我想使用 ajax 验证用户和密码，但我无法使用 preventDefault() 和 stopPropagation() 来阻止表单事件中的默认提交事件。

找到下面的代码只是为了看看你能帮我一把，知道发生了什么。提前致谢。

注意事项：

1) 弹出框触发器是 id="signin_popover_trigger" 的元素 2）popover内容是class="signin_popover_content"

里面的html代码

HTML 代码：

<a href="javascript:void(0)" id="signin_popover_trigger" class="popover_trigger" data-name="signin" data-toggle="popover">Sign in</a>
<div class="signin_popover_content">
    <div class="signin_wrapper">
        <form class="user_access_form" method="post">
        <h4 class="blue weight-bold">Sign in</h4>
        <label class="grey weight-normal">Email:</label>
        <input type="text" name="user_email" class="form-control margin-bottom">
        <label class="grey weight-normal">Password:</label>
        <input type="password" name="password" class="form-control margin-bottom">
        <input type="submit" class="btn btn-info margin-top user_access_submit" name="sign_in_submit" value="Sign in">
        </form>
    </div>
</div>

Javascript 代码：

$('.user_access_form').submit(function(event){
    event.stopPropagation();
    event.preventDefault();
    //Validation code here
});


$('#signin_popover_trigger').popover({
    html: true,
    content: function(){
        return $('.signin_popover_content').html();
    },
    placement: 'bottom',

});

CSS 代码

.signin_popover_content {
    display: none;
}

事实上，如果表单没有放入弹出框，它就会正确停止。

谢谢！！！

【问题讨论】：

event.stopPropagation(); 有什么原因吗？
其实没有。我认为使用 event.preventDefault() 应该就足够了，但无论如何它都不起作用。感谢您的评论大卫。
@Supercoco 把第一行改成$(document).on('submit', '.user_access_form', function(event){ 看看能不能解决
谢谢 MrCode，我正要写同样的答案。这完美地工作。非常感谢！！！

标签： jquery forms twitter-bootstrap

【解决方案1】：

我刚刚发现了答案。 Bootstrap popover 不允许向侦听器添加任何事件。解决方法如下：

$(document).on('submit', '.popover .user_access_form', function(event) {
     event.preventDefault();
     //Code here
});

感谢 MrCode 提供答案。干杯。

【讨论】：

【解决方案2】：

扩展我的评论：正在发生的事情是您正在分配事件处理程序，然后创建弹出窗口。当 Boostrap 创建弹出窗口时，它会删除旧的表单，然后在 DOM 中创建一个新的表单元素，因此之前的所有事件处理程序都会丢失。

您可以通过委托事件来解决它：

$(document).on('submit', '.user_access_form', function(event){
    event.preventDefault();
});

或者，您可以等待分配事件处理程序，仅在创建弹出窗口之后。

【讨论】：