the toast is not showing in bootstrap 5 even though no error in developer tools

huangapple
go评论105阅读模式
英文:

the toast is not showing in bootstrap 5 even though no error in developer tools

问题

为什么下面的代码中 Toast 不显示？我正在使用 bootstrap 5。我完全不知道为什么，因为在开发者工具中没有任何错误。任何帮助都会感激。

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Page Template</title>
  9.     <!-- jQuery -->
  10.     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  12.     <!-- Bootstrap CSS -->
  13.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
  15.     <!-- Font Awesome CSS -->
  16.     <link rel="stylesheet" href="/assets/fontawesome-5.15.1/css/all.min.css" />
  18.     <!-- Bootstrap JavaScript -->
  19.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  20. </head>
  22. <body>
  23.     <h1>Welcome to the Page</h1>
  25.     <!-- Your content here -->
  26.     <div id="toast-sticky-message" class="position-fixed bottom-0 end-0 p-3" style="z-index: 1500000">
  27.         <div class="toast">
  28.             <div class="toast-body">
  29.                 <span id="toast-content"></span>
  30.                 <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  31.             </div>
  32.         </div>
  33.     </div>
  35.     <script>
  36.         $(function() {
  37.             function makeAlertElem(string, id = false, replace = false, color = "alert-info", timeout = 5000,
  38.                 dismissable = true) {
  39.                 let toastElement = document.getElementById("toast-sticky-message");
  40.                 if (!toastElement) {
  41.                     return false;
  42.                 }
  43.                 console.log("toast string", string);
  44.                 toastElement.querySelector("#toast-content").innerHTML = string;
  45.                 let toast = new bootstrap.Toast(toastElement);
  46.                 console.log("toast 2", toast);
  47.                 toast.show();
  48.             }
  49.             // end function makeAlertElem
  51.             makeAlertElem('hello world');
  52.         });
  53.     </script>
  54. </body>
  56. </html>
英文:

why is the Toast not showing in the code below? I'm using bootstrap 5. I haven't the slightest idea why because there isn't any errors in the developer's tools. any help is appreciated.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3. &lt;head&gt;
  4. &lt;meta charset=&quot;UTF-8&quot;&gt;
  5. &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  6. &lt;title&gt;Page Template&lt;/title&gt;
  7. &lt;!-- jQuery --&gt;
  8. &lt;script src=&quot;https://code.jquery.com/jquery-3.3.1.min.js&quot;&gt;&lt;/script&gt;
  9. &lt;!-- Bootstrap CSS --&gt;
  10. &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css&quot;&gt;
  11. &lt;!-- Font Awesome CSS --&gt;
  12. &lt;link rel=&quot;stylesheet&quot; href=&quot;/assets/fontawesome-5.15.1/css/all.min.css&quot; /&gt;
  13. &lt;!-- Bootstrap JavaScript --&gt;
  14. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;
  15. &lt;/head&gt;
  16. &lt;body&gt;
  17. &lt;h1&gt;Welcome to the Page&lt;/h1&gt;
  18. &lt;!-- Your content here --&gt;
  19. &lt;div id=&quot;toast-sticky-message&quot; class=&quot;position-fixed bottom-0 end-0 p-3&quot; style=&quot;z-index: 1500000&quot;&gt;
  20. &lt;div class=&quot;toast&quot;&gt;
  21. &lt;div class=&quot;toast-body&quot;&gt;
  22. &lt;span id=&quot;toast-content&quot;&gt;&lt;/span&gt;
  23. &lt;button type=&quot;button&quot; class=&quot;btn-close&quot; data-bs-dismiss=&quot;toast&quot; aria-label=&quot;Close&quot;&gt;&lt;/button&gt;
  24. &lt;/div&gt;
  25. &lt;/div&gt;
  26. &lt;/div&gt;

<script>
$(function() {
function makeAlertElem(string, id = false, replace = false, color = "alert-info", timeout = 5000,
dismissable = true) {
let toastElement = document.getElementById("toast-sticky-message");
if (!toastElement) {
return false;
}
console.log("toast string", string);
toastElement.querySelector("#toast-content").innerHTML = string;
let toast = new bootstrap.Toast(toastElement);
console.log("toast 2", toast);
toast.show();
}
// end function makeAlertElem

  1.         makeAlertElem(&#39;hello world&#39;);
  2. });

</script>
</body>

  1. &lt;/html&gt;

<!-- end snippet -->

答案1

得分: 2

这是因为 Toast 使用了错误的元素进行初始化。你应该目标定位具有类名 toast 的元素：

  1. function makeAlertElem(string, id = false, replace = false, color = "alert-info", timeout = 5000, dismissable = true) {
  2.   let toastElement = document.querySelector("#toast-sticky-message .toast");
  3.   if (!toastElement) {
  4.     return false;
  5.   }
  6.   toastElement.querySelector("#toast-content").innerHTML = string;
  7.   let toast = new bootstrap.Toast(toastElement);
  8.   toast.show();
  9. }
  10. // end function makeAlertElem
  12. makeAlertElem('hello world');
  1. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
  2. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  4. <h1>Welcome to the Page</h1>
  6. <div id="toast-sticky-message" class="position-fixed bottom-0 end-0 p-3" style="z-index: 1500000">
  7.   <div class="toast">
  8.     <div class="toast-body">
  9.       <span id="toast-content"></span>
  10.       <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  11.     </div>
  12.   </div>
  13. </div>

注意：我只翻译了代码部分，不包括注释。

英文:

It's because the Toast is initialized with the wrong element. You should target the element with class toast :

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. function makeAlertElem(string, id = false, replace = false, color = &quot;alert-info&quot;, timeout = 5000,
  2. dismissable = true) {
  3. let toastElement = document.querySelector(&quot;#toast-sticky-message .toast&quot;);
  4. if (!toastElement) {
  5. return false;
  6. }
  7. toastElement.querySelector(&quot;#toast-content&quot;).innerHTML = string;
  8. let toast = new bootstrap.Toast(toastElement);
  9. toast.show();
  10. }
  11. // end function makeAlertElem
  12. makeAlertElem(&#39;hello world&#39;);

<!-- language: lang-html -->

  1. &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css&quot;&gt;
  2. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;
  3. &lt;h1&gt;Welcome to the Page&lt;/h1&gt;
  4. &lt;div id=&quot;toast-sticky-message&quot; class=&quot;position-fixed bottom-0 end-0 p-3&quot; style=&quot;z-index: 1500000&quot;&gt;
  5. &lt;div class=&quot;toast&quot;&gt;
  6. &lt;div class=&quot;toast-body&quot;&gt;
  7. &lt;span id=&quot;toast-content&quot;&gt;&lt;/span&gt;
  8. &lt;button type=&quot;button&quot; class=&quot;btn-close&quot; data-bs-dismiss=&quot;toast&quot; aria-label=&quot;Close&quot;&gt;&lt;/button&gt;
  9. &lt;/div&gt;
  10. &lt;/div&gt;
  11. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月22日 17:06:47
  • 转载请务必保留本文链接：https://go.coder-hub.com/76530257.html
  • bootstrap-5
  • html
  • javascript
  • jquery
  • toast
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定