bootstrap popover form（ajax）

Question

我正在实施一项功能。

目标：

使用带有ajax请求的弹出窗体。     bootstrap popover

注意：之前我尝试使用bootstrap editables

取得同样的效果

但是由于我不希望在页面上显示数据（在弹出框中输入）。 （哪些可编辑的内容）。

所以，

使用当前方法（jsfiddle）

问题：

当我点击popover以输入from popover中的数据时消失。

我正在寻找一个jquery修复程序。 （事件传播会做的事情）

我的代码：

<div class="box-icon" >
    <div class="popover-markup">
        <a href="#" class="trigger"><i class="icon-plus-sign"></i></a> 
            <div class="head hide">Enter Email<i class="icon-remove" style="margin-left: 120px;"></i></div>
                <div class="content hide">
                      <input type="text" placeholder="Type email address">
                      <button type="submit" class="btn">Submit</button>
                </div>
            <div class="footer hide">test</div> 
    </div>
</div>

我的脚本是：

$( document ).ready(function() {

    $('.popover-markup > .trigger').popover({ 
        html : true,
        title: function() {
            return $(this).parent().find('.head').html();
        },
        content: function() {
            return $(this).parent().find('.content').html();
        }
    });

    // Attach click handler to document
    $(document).bind('click', function (e) {
        $(".popover-markup").popover('hide');
    });

    // Dont hide when I click anything inside #container
    $('.popover-markup').bind('click', function(e) {
        e.stopPropagation();
    });

});