如何使 Bootstrap 弹出事件起作用？

Posted 2023-05-08

【中文标题】如何使 Bootstrap 弹出事件起作用？

【英文标题】：How to make Bootstrap popover events work?

【发布时间】：2021-10-28 21:49:22

【问题描述】：

我已经通过数据属性添加了一个 Bootstrap 弹出框，我想在它出现后隐藏该弹出框。所以正如bootstrap docs 中提到的，我认为我可以通过shown.bs.popover 事件来实现这一点。但这似乎不起作用。

我的尝试：

<a tabindex="0" class="btn btn-sm btn-primary" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="First do as it follows" data-timeout="2000" id="submit-btn1" data-animation="true">Done</a>
<script>            

$("submit-btn1").on("shown.bs.popover", 
                function()
                    setTimeout(function()
                        $("submit-btn1").popover("hide")
                    , 5000);
                );
        );
</script>

【问题讨论】：

您在$("submit-btn1") 上缺少#

【参考方案1】：

您在$("submit-btn1") 上缺少#，并且您的脚本上还有一个额外的);。我修改了代码，应该可以了。

<a tabindex="0" id="submit-btn1" class="btn btn-sm btn-primary" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="First do as it follows" data-timeout="2000"  data-animation="true">Done</a>

<script>            

$("#submit-btn1").on("shown.bs.popover", function()     
   
   setTimeout(function()   $(this).popover("hide")   , 5000);

);

</script>

另外，一个建议，确保你没有使用没有任何属性的属性 效用。你的这个标签可能有很多不是真的 用过的。这是为了实现更干净的代码，这总是好的， 为了更容易理解。

我总是把id放在课前或课后，这很重要 属性可以很容易地看到它。