引导弹出表单未使用 AJAX 提交

Question

我有一个引导弹出表单，其中包含几个输入文本字段和一个提交按钮。弹出框与输入文本字段一起显示得很好，但是当单击提交按钮时，根本不会阻止默认操作。我也尝试登录表单提交，但根本没有记录任何内容。我认为原因与弹出框以及它们最初是如何实现的有关。

<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 可用，但它并不总是影响屏幕阅读器和 自 v3.0.1 起已弃用。请改用 .hidden 或 .sr-only。