javascript - Bootstrap popover 只出现一次

Question

我试图让我的 bootstrap popover 在复选框被“选中”时出现，但它似乎只工作一次。理想情况下，我希望它在每次“选中”复选框时出现，然后在 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);
  });

 }

});

这是我的 fiddle :

link to my JS fiddle

非常感谢任何建议。谢谢!!

Answer 1

您需要做的是初始化 popover在 dom 上准备好手动触发，然后当复选框被选中时调用 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