Bootstrap弹出窗口只出现一次

Bootstrap popover only appearing once

本文关键字：一次 窗口 Bootstrap      更新时间：2023-09-26

我正试图让我的引导程序弹出窗口在复选框被"选中"时出现，但它似乎只起作用一次。理想情况下，我希望它在每次"选中"复选框时出现，然后在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);
  });
 }
});

这是我的小提琴：

链接到我的JS fiddle

如有任何建议，不胜感激。谢谢

您需要做的是用手动触发器初始化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

相关文章：