无法让 Bootstrap toast 关闭或自动隐藏工作

Question

我正在尝试使用以下代码在我的 ASP.NET Web 应用程序中实现 Bootstrap 5 toasts...

超文本标记语言

                    <div class="row">
                        <div class="toast" id="companyUpdOK" name="companyUpdOK" role="alert" data-delay="5000" data-autohide="true" aria-live="assertive" aria-atomic="true">
                            <div class="toast-header">
                                <strong class="me-auto">Bootstrap</strong>
                                <small>11 mins ago</small>
                                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                            </div>
                            <div class="toast-body">
                                Hello, world! This is a toast message.
                            </div>
                        </div>
                    </div>

JavaScript

$('#companyUpdOK').toast();  // code to set up toast
...
$('#companyUpdOK').show();   // and later, the code to display the toast

因此，吐司显示了，但自动隐藏不起作用，并且关闭按钮也不起作用。我尝试了我能找到的所有组合，包括在初始化 toast 时设置选项，如下所示：

$('#companyUpdOK').toast({delay: 5000, autohide: true});

这些都不起作用。我究竟做错了什么？

Answer 1

您的代码可以进行一些更改

Bootstrap 5 不需要 jQuery，并且原生 JavaScript 库非常易于使用。然而，如果您确实使用 jQuery，请记住文档可能不会向您展示使用 jQuery 执行某些操作的正确方法。

以下是需要注意的几个问题：

1. 初始化

当 Bootstrap 5 检测到 jQuery 时，它会在 DOMContentLoaded 事件上加载 jQuery 插件。重要的是，这似乎发生在 jQuery 就绪事件之后。如果您需要在页面加载时使用 Bootstrap 执行某些操作，请添加一个处理程序，例如：

document.addEventListener("DOMContentReady", function() {

   $("#mytoast").toast();

});

2.jQuery插件

Bootstrap 添加到 jQuery 的插件只是 Bootstrap 原生 JavaScript 方法的包装器。语法不同，查看文档可能会误导您如何使用 jQuery 进行操作。

例如，显示 Toast 的本机 JavaScript 方式：

let toast = bootstrap.Toast.getOrCreateInstance(myToastEl);
toast.show(); 

然而，如果您使用 jQuery，这将不起作用，即使从文档中看起来是这样。

let toast = $(myToastEl).toast();
toast.show();

使用 jQuery，你需要这样做：

$(myToastEl).toast("show");

3. 数据属性

请注意，属性有一个新的前缀：data-bs-<name> 因此，如果您使用data-delay而不是正确的前缀data-bs-delay，那么它将无法正常工作。

演示片段

该代码片段将这些更改合并到原始代码中，并且 Bootstrap toast 按预期显示。

document.addEventListener("DOMContentReady", function() {

   $("#mytoast").toast();

});

let toast = bootstrap.Toast.getOrCreateInstance(myToastEl);
toast.show();