Question

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

为弹出式重复使用添加了简单帮助：

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

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

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

Twitter Bootstrap Popover在节目后立即隐藏

1 个答案: