Javascript Preventstrap popover中的默认表单提交不起作用

我有一个bootstrap popover元素，里面有一个表单

提交表单时，我会执行

preventDefault（）

，但实际上并不会阻止提交

当我不使用popover和modal时，它可以完美地工作

这是我的HTML：

<div class="hide" id="popover-content">
    <form action="api/check.php" class="checkform" id="requestacallform" method="get" name="requestacallform">
        <div class="form-group">
            <div class="input-group">
                <input class="form-control" id="domein" name="name" placeholder="domein" type="text">
            </div>
        </div><input class="btn btn-blue submit" type="submit" value="Aanmelden">
        <p class="response"></p>
    </form>
</div>

这就是我在另一个JavaScript文件中执行

preventDefault（）

的地方

$(".checkform").submit(function(e) {
    e.preventDefault();
    var request = $("#domein").val();
    $.ajax({
        // AJAX content here
    });
});

---

为什么

preventDefault（）

不起作用？

在将

添加到DOM之前，您正在尝试为其附加事件处理程序。加载内容html或附加事件全局后，需要加载第二个javascript文件：

$("body").on("submit",".checkform", function(e){
    e.preventDefault();
    var request = $("#domein").val();
    $.ajax({
       ...
});

在将事件处理程序添加到DOM之前，您可以阅读有关动态htmls上的事件绑定的更多信息。加载内容html或附加事件全局后，需要加载第二个javascript文件：

$("body").on("submit",".checkform", function(e){
    e.preventDefault();
    var request = $("#domein").val();
    $.ajax({
       ...
});

您可以阅读有关动态htmls上事件绑定的更多信息，请尝试以下方式：

$(document).on('submit', '.checkform', function(e){
    e.preventDefault();
    var request = $("#domein").val();
    $.ajax({
       ...
});

popover可能没有在页面加载时加载，而是在需要时生成，因此您需要文档选择器。
请这样尝试：

$(document).on('submit', '.checkform', function(e){
    e.preventDefault();
    var request = $("#domein").val();
    $.ajax({
       ...
});

可能popover没有在页面加载时加载，而是在需要时生成，因此您需要文档选择器。
因为每当打开popover时，都会动态创建一个新的dom片段，您可以利用它来附加事件或像您需要的那样操纵html本身

从中，您需要收听此事件：

inserted.bs.popover：将popover模板添加到DOM中时，在show.bs.popover事件之后激发此事件

因此，我的建议是避免活动授权，并将活动直接附加到正确的元素：


$（函数（）{
//单击打开弹出窗口
$（'popover'）。popover({
是的，
内容：功能（）{
返回$（“#popover内容”）.html（）；
}
});
//将popover模板添加到DOM时
//找到正确的元素并附加事件处理程序
//因为popover模板在关闭时被删除
//使用.off（'submit'）删除事件是无用的
$（'#popover'）.on（'inserted.bs.popover'，函数（e）{
$（this）.next（'.popover'）.find（'.checkform'）.on（'submit'，函数（e）{
e、 预防默认值（）；
var请求=$（“#domein”）.val（）；
//做你的事
$（'popover'）。触发器（'click'）；
});
});
});

单击打开弹出窗口

因为每当打开popover时，就会动态创建一个新的dom片段，您可以利用它来附加事件或根据需要操纵html本身

从中，您需要收听此事件：

inserted.bs.popover：将popover模板添加到DOM中时，在show.bs.popover事件之后激发此事件

因此，我的建议是避免活动授权，并将活动直接附加到正确的元素：


$（函数（）{
//单击打开弹出窗口
$（'popover'）。popover({
是的，
内容：功能（）{
返回$（“#popover内容”）.html（）；
}
});
//将popover模板添加到DOM时
//找到正确的元素并附加事件处理程序
//因为popover模板在关闭时被删除
//使用.off（'submit'）删除事件是无用的
$（'#popover'）.on（'inserted.bs.popover'，函数（e）{
$（this）.next（'.popover'）.find（'.checkform'）.on（'submit'，函数（e）{
e、 预防默认值（）；
var请求=$（“#domein”）.val（）；
//做你的事
$（'popover'）。触发器（'click'）；
});
});
});

单击打开弹出窗口

感谢您的回复，我当时正在使用Meteor，也遇到了同样的问题。我用了@Marcel Wasilewski的回答，就像这样

Template.voteContest.onRendered(function() {

$(document).on('submit', '.keep-vote', function(event){
    // Prevent default browser form submit
    event.preventDefault();

    // Clear all popovers
    $("[data-toggle='tooltip']").popover('hide');
});

});

谢谢你的回复，我用的是Meteor，也有同样的问题。我用了@Marcel Wasilewski的回答，就像这样

Template.voteContest.onRendered(function() {

$(document).on('submit', '.keep-vote', function(event){
    // Prevent default browser form submit
    event.preventDefault();

    // Clear all popovers
    $("[data-toggle='tooltip']").popover('hide');
});

});

这可能是因为加载脚本时，
.checkform
不在DOM中（用于
.submit
的函数）。您可以使用
$（文档）。在（'submit'，'.checkform'，函数（e）.
上，它的可能副本可能是因为加载脚本时，
.checkform
不在DOM中（用于
.submit
）的函数）。您可以使用
$（文档）。在（'submit'，'checkform'，函数（e）上…