防止 Bootstrap 弹出框在被 .hide() 隐藏之前出现

Question

我正在尝试使弹出框根据条件出现/不出现。

  <form class="submit-form" action="{% url 'search' %}" method="post">
                                {% csrf_token %}
                                <input type="submit" class="show-more-button pop" id="mybtn" style="margin-left: 5px" name="mybtn"
                                       value="Search" data-bs-toggle="popover"
                                       data-bs-placement="right" data-bs-trigger="focus"
                                       data-bs-content="Please select one or more ingredient">
                            </form>

$(document).on('click', '#mybtn', function (){
    var $btn = $('#mybtn')[0]
    var $pop = bootstrap.Popover.getInstance($btn)
    if ($(lst).length > 0) {
        $pop.hide()       
    }

但是，单击按钮时弹出框comes up briefly before being hidden。 如果满足条件，或者至少使其在隐藏之前不会闪烁，有什么办法可以基本上防止弹出框首先出现？

Answer 1

由于data-bs-toggle="popover" 属性，Bootstrap 正在显示弹出框。在运行之后，然后你的隐藏代码开始运行。因此出现了短暂的外观。

Bootstrap 有一个"show.bs.popover" event。我的猜测是，如果您为该事件附加一个侦听器，然后在该事件上添加preventDefault，这将阻止弹出框显示。

或者，您可以手动执行此操作，而不是依靠 Bootstrap 自动触发弹出窗口 - 并且仅在条件成功时手动触发弹出窗口。