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

【问题标题】：The Delay property of a toast in Jquery, does not work on a site built in PHPJquery 中 toast 的 Delay 属性在 PHP 构建的站点上不起作用
【发布时间】：2019-09-06 16:54:19
【问题描述】：

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

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

我。吐司代码：

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

二。部分表单代码（当前从外部文件调用它// with 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 显示正确，它的延迟属性就不能正常工作。

【问题讨论】：

你用的是什么吐司插件？ jquery toast 插件here 根本没有传递一个元素，所以我很困惑这应该如何工作。
我正在使用 Bootstrap Toasts：getbootstrap.com/docs/4.2/components/toasts（我在我的表单中使用 Bootstrap）。
我去试试你发的api。
为什么不直接通过 HTML 属性放入：即。 data-delay="500"?
你发给我的吐司插件对我有用！谢谢 FrankerZ！

标签： php jquery bootstrap-4

【解决方案1】：

如ugh StackExchange 所述，将 data-delay 属性添加到标签对我有用。

请尝试以下代码

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");
})

【讨论】：