Bootstrap toast - 不遵守数据延迟 - Toast 不隐藏

Question

点击表单的提交按钮后 (Ajax POST) 我想用 Django 视图中生成的消息刷新 toast。我成功显示了消息，但数据延迟未得到遵守，5 秒后 toast 没有消失。

<div id="messages" aria-live="polite" aria-atomic="true" style="position: relative">
        <div style="position: absolute; top: 12px; right: 12px;" >
            {% for message in messages %}
                    <div class="toast d-flex toast-success" role="alert" aria-live="assertive" aria-atomic="true" data-delay="3000">
                        <div class="toast-header toast-success shadow-none" >
                            <i class="fas fa-check"></i>
                        </div>
                        <div class="toast-body">
                            {{message}} 
                        </div>
                    </div>
            {% endfor %}
        </div>
    </div>

在 Ajax 的成功部分，我有以下代码：

$('#messages).load(location.href + " #messages>*", "")

Answer 1

在这种情况下你可以使用setTimeout：

$("#messages").load(location.href + " #messages>*", "");
setTimeout(function(){$("#messages").empty();}, 5000);

更新

阻止setTimeout()设置的函数执行：

var myTimeout;

function myFunction() {
  clearTimeout(myTimeout);
  $("#messages").load(location.href + " #messages>*", "");
  myTimeout = setTimeout(function(){$("#messages").empty();}, 5000);
}

Bootstrap toast - 不遵守数据延迟 - Toast 不隐藏

Bootstrap toast - Data delay not respected - Toast dont hide

django

toast

bootstrap-4