javascript - Twitter Bootstrap Popover 显示后立即隐藏

Question

我正在尝试使用 Bootstrap 弹出窗口来显示错误。代码只有在第一次点击按钮后才能正常工作。在下一次点击期间，弹出窗口会显示但会立即消失。

为弹出窗口的重用添加了简单的助手:

var popoverHelper = function (selector) {
    var $element = $(selector);
    $element.popover({
        placement: "bottom",
        trigger: 'manual'
    });
    return {
        showPopover: function (text) {
            $element.attr('data-content', text);
            $element.popover('show');
        },
        hidePopover: function () {
            $element.popover('hide');
        },
        destroyPopover: function () {
            $element.popover('destroy');
        }
    };
};

使用助手:

var pHelper = popoverHelper('#postInput');

$('#postButton').click(function (e) {
    e.preventDefault();
    // hide open popover if open
    pHelper.hidePopover();
    ...
    // some functionality
    ...
    // show popover if some errors  
    pHelper.showPopover('error occurs!!');
});

使用 jQuery - 2.1.1，Twitter Bootstrap - 3.1.1。

完整样本位于 jsfiddle .

小提示:如果我调用 popover destroy，如果我在 show 上调用 popover re-init，一切正常。但我认为这不是最优的。

Jsfiddle样本。

Answer 1

检查这个 Demo Fiddle

更好的解决方案是在错误字段上隐藏用户操作的弹出窗口。

$('input').focus(function(){
     pHelper.hidePopover();
});