Jquery 中 toast 的 Delay 属性在 PHP 构建的网站上不起作用

Question

我有一个用 PHP 构建的 mysql 数据库连接。在前端级别，我包含了 Bootstrap 和 Jquery，以便能够在许多事情中包含 toast。这些通知在将数据输入数据库后显示，但它们可见的时间很短，无法延迟修改时间。

我已经尝试将 toast 脚本包含在正文和表单的头部中，就像在使用 defer 调用的外部文件中一样，以免导致加载脚本的顺序发生冲突，但我仍然无法修改 toast 延迟。我正在使用 Debian 进行本地安装。

一、toast代码：

$(document).ready(function(){
     $("#btnEnter").click(function(){
     $("#enter_data").toast({ delay: 5000 });
     $('#enter_data').toast('show');
     });
});

二. 部分表单代码（当前从外部文件 // 使用 defer 调用它）：

<input id="btnEnter" type="submit" name="enter_data" value="Enter Card" class="btn btn-primary">

</form>

</div>



<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;">

  <!-- Then put toasts within -->
  <div class="toast" id="enter_data" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">

我不明白为什么如果 toast 显示正确，其延迟属性无法正常工作。

Answer 1

将 data-delay 属性添加到标签对我来说很有效，如ugh StackExchange所描述的那样。

请尝试以下代码

HTML：

<div aria-live="polite" aria-atomic="true" style="position: relative; z-index:9999; top: 15px;">
    <!-- Position it -->
    <div style="position: absolute; right: 0;">

        <!-- Then put toasts within -->
        <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
            <div class="toast-header">
                <img src="..." class="rounded mr-2" alt="...">
                <strong class="mr-auto">Bootstrap</strong>
                <small class="text-muted">just now</small>
                <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="toast-body">
                See? Just like this.
            </div>
        </div>

        <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="4000">
            <div class="toast-header">
                <img src="..." class="rounded mr-2" alt="...">
                <strong class="mr-auto">Bootstrap</strong>
                <small class="text-muted">2 seconds ago</small>
                <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="toast-body">
                Heads up, toasts will stack automatically
            </div>
        </div>
    </div>
</div>

JavaScript：

$(".toast").each(function (index, e) {
  $(e).toast("show");
})