Bootstrap 弹出表单未使用 AJAX 提交

Question

我有一个 bootstrap 弹出窗体，它有几个输入文本字段和一个提交按钮。弹出窗口在输入文本字段中显示良好，但是当单击提交按钮时，根本不会阻止默认操作。我也尝试登录表单提交，但根本没有记录任何内容。我认为原因与弹出框以及它们最初的实现方式有关。

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

任何有清晰想法的人都可以提供帮助。谢谢

Answer 1

原因是，您的 .popover-content 实际上是被克隆并注入 <div> 内的 DOM，.popover 本身。所以你的 submit() 永远不会绑定到弹出框内显示的表单，因为它是稍后添加的。如果您将事件作为委托事件处理程序绑定到 document，那么它也将与 .popover 中显示的表单一起工作：

$(document).on('submit','form',function(){
    alert('form submitted');
    //prevent -> return false
    return false;
});

演示 -> http://jsfiddle.net/r1q6qjpo/

注意: .hide is deprecated :

.hide is available, but it does not always affect screen readers and is deprecated as of v3.0.1. Use .hidden or .sr-only instead.

Bootstrap 弹出表单未使用 AJAX 提交

Bootstrap pop over form not submitting using AJAX

php

jquery

popover

twitter-bootstrap

bootstrap-popover