用于显示和销毁引导程序弹出窗口的Javascript代码未按预期执行

Question

我创建了一个函数createPopover()，用于在元素上创建一个弹出窗口，如下所示：

function createPopover(destination, content){
    var popoverTemplate = ['<div class="timePickerWrapper popover">',
            '<div class="arrow"></div>',
            '<div class="popover-content login-popover">',
            '</div>',
            '</div>'].join('');
    destination.popover({
        template: popoverTemplate,
        content: content,
        html: true,
        placement:'top',
        trigger: 'manual'
    });
    destination.popover('show');
}

如下所示：

createPopover($('.drop-time-text'), 'Please select a drop off time');

我还编写了一个破坏popover函数，用于破坏当前页面上的所有弹出窗口

function destroyPopover(destination){
    $('.styled-select-car').popover('destroy');
    $('.pick-date-text').popover('destroy');
    $('.pick-time-text').popover('destroy');
    $('.drop-date-text').popover('destroy');
    $('.drop-time-text').popover('destroy');
}

这些用于基本验证过程如下：

if(pickUpDate == ''){
    destroyPopover(); //All popovers removed before creating a new one
    createPopover($('.pick-date-text'), 'Please select a pick up date');
    return false;
}

其中pickUpDate = $('.pick-date-text').val()。

虽然调试代码以预期的方式进行，但在UI中，弹出窗口出现在第一次单击时，但在第二次单击验证按钮时闪烁并消失。我不太清楚为什么会这样。