Question

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

找到下面的代码，只是为了看到你可以帮助我，知道发生了什么。提前谢谢。

注意：

1）popover触发器是id =“signin_popover_trigger”的元素 2）popover内容是class =“signin_popover_content”中的html代码

HTML code：

<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;
}

事实是如果表单没有放入popover中，表单会被正确停止。

谢谢!!!

Answer 1

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

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

感谢MrCode提供答案。欢呼声。

Answer 2

扩展我的评论：发生了什么是您正在分配事件处理程序，然后创建弹出窗口。当Boostrap创建弹出窗口时，它会移除旧窗体，然后在DOM中创建一个新的窗体元素，因此任何以前的事件处理程序都会丢失。

您可以通过委派活动解决此问题：

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

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

在bootstrap popover中如何防止表单提交？

2 个答案: