Question

我有一个bootstrap 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;
});

任何有明确想法的人都可以提供帮助。感谢。

Answer 1

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

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

演示 - ＆gt;的 http://jsfiddle.net/r1q6qjpo/

注意：.hide is deprecated：

.hide可用，但它并不总是影响屏幕阅读器和自v3.0.1起不推荐使用。请改用.hidden或.sr-only。

Bootstrap popover表单不使用AJAX提交

1 个答案: