Bootstrap弹出窗口只出现一次

Question

我试图让我的引导弹出窗口出现时，复选框是“检查”，但它似乎只工作一次。理想情况下，我希望每当复选框被“检查”时出现，然后在5秒后超时。我一直在摆弄这个小时，似乎无法让它正常工作。

这里是我的标记：

<label><input type="checkbox"> Long long long label title </label> 

这里是我的JS：

$('label input').on('change', function() { 

    if ($('label input').is(':checked')) { 

    $('label').popover({ 
    placement: 'bottom', 
    content: 'This is awesome popover content!.' 
    }).on('shown.bs.popover', function() { 
    setTimeout(function() { 
    $('label').popover('hide'); 
    }, 5000); 
    }); 

} 

}); 

这里是我的小提琴：

link to my JS fiddle

任何意见是极大的赞赏。谢谢！！

Answer 1

你需要做的是初始化DOM的准备与手动触发的popover，然后在随后的复选框被选中调用show功能

$('label').popover({ 
    placement: 'bottom', 
    content: 'This is awesome popover content!.', 
    trigger: 'trigger' 
}).on('shown.bs.popover', function (e) { 
    setTimeout(function() { 
     $(e.target).popover('hide'); 
    }, 5000); 
}); 

$('label input').on('change', function() { 
    if (this.checked) { 
     $(this).parent().popover('show') 
    } 
}); 

演示：搞清楚这一点Fiddle