读取“$(...).toast”时出现类型错误答案

【问题标题】：TypeError when reading "$(...).toast"读取“$(...).toast”时出现类型错误
【发布时间】：2020-04-22 20:37:21
【问题描述】：

我正在使用 Django Channels 和 WebSockets 编写一个 Web 应用程序，并且我想在 WebSocket 连接打开时动态创建引导 toast (https://getbootstrap.com/docs/4.2/components/toasts/)。问题是引发了一个错误“Uncaught TypeError: $(...).toast is not a function”。所以问题是如何阅读 $('.toast').toast('show'); 行 Socket.onopen（我不是很喜欢jQuery）。如果您有任何想法，我将不胜感激？

这里是js文件的一部分：

 var Socket = new ReconnectingWebSocket(ws_path)
    Socket.onopen = function (e) {
      newToast();
      $('.toast').toast('show');
     };

    function newToast(data) {
        // create Bootstrap toast element
     };

在html文件的头部，加载了Bootstrap和jQuery：

<head>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>

PS：我已经尝试用 jQuery 替换美元符号。同样的错误：Uncaught TypeError: jQuery(..) ...

【问题讨论】：

听起来像 $ 被分配了 jQuery 以外的其他东西，或者当时没有加载引导 JS 库。试试console.log($)，看看能给你带来什么。
@Yassine 该输出看起来像您的 $ 正确地别名为 jQuery。你的bootstrap.js 加载了吗？
自从我使用 jQuery 以来已经很久了，但这看起来像是一个 jQuery 方法。如果您尝试console.log($('.toast')) 和console.log($('.toast').toast('show')) 会怎样。如果元素存在，第一个将返回 length: 1。如果 Boostrap js 没有加载，第二个应该会给你一个错误。
你能对.toast div 做其他事情吗？可能是这样的：$('.toast').css('border', '3px solid red'); 如果这也不起作用，您的脚本可能在 DOM 准备好之前触发。
我再次更新了我的答案。看看吧。

标签： javascript jquery bootstrap-4 django-channels

【解决方案1】：

我遇到了同样的问题...我能找到的唯一解决方案是使用谷歌的 CDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【讨论】：