2

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

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

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

4

1 回答 1

2

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

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

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

注意：.hide已弃用：

.hide 可用，但它并不总是影响屏幕阅读器，并且从 v3.0.1 起已弃用。请改用 .hidden 或 .sr-only。

于 2015-03-04T11:40:20.740 回答