JavaScript 不适用于 bootstrap 4 + thymeleaf答案

【问题标题】：JavaScript doesn't work with bootstrap 4 + thymeleafJavaScript 不适用于 bootstrap 4 + thymeleaf
【发布时间】：2019-07-07 03:51:08
【问题描述】：

我正在使用 Spring Boot、Bootstrap 4 和 Thymeleaf 开发一个 Web 应用程序。我想显示一个引导警报，然后它会在几秒钟后自动隐藏（就像“成功”通知一样）。

我找到了很多解决方案，但都需要 JavaScript。当我尝试在我的项目中使用 JS 时，它不起作用。

我使用默认模板，通过layout:decorate="~{default}" 在其他视图中使用该模板。在这个默认模板中，我有 Bootstrap 链接和脚本：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

...

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

如果将以下代码放入任何视图中，它什么也不做。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{default}">

    <head>
      ...
    </head>

    <body class="text-center">
        <div layout:fragment="content">

            <div class="product-options">
                <a id="myWish" href="javascript:;" class="btn btn-mini">Add to Wishlist </a>
                <a href="" class="btn btn-mini"> Purchase </a>
            </div>
            <div class="alert alert-success" id="success-alert">
                <button type="button" class="close" data-dismiss="alert">x</button>
                <strong>Success! </strong> Product have added to your wishlist.
            </div>
            <script type="text/javascript">
                $(document).ready(function () {
                    $("#success-alert").hide();
                    $("#myWish").click(function showAlert() {
                        $("#success-alert").fadeTo(2000, 500)
                        .slideUp(500, function () {
                            $("#successalert").slideUp(500);
                        });
                    });
                });
            </script>
            ...

        </div>
    </body>

注意：这只是一个检查 JS 不工作的例子。我从this post 那里得到它。

当我运行此代码时，会显示警报，但它永远不会消失。我尝试了很多脚本，但都没有工作。

可能是兼容性版本问题？

【问题讨论】：

在 thymeleaf 中写 instade of
非常感谢@Atanu，我必须添加 th:line 才能正确运行它。

标签： javascript jquery spring-boot bootstrap-4 thymeleaf

【解决方案1】：

您好，我认为这篇文章解决了您的问题：

Why does jQuery throw the error `fadeOut is not a function'?

在<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 这一行中，您使用的是精简版的 Jquery，而不是完整版，当我单击“添加到愿望清单”链接时，会在 Firefox 开发者工具控制台中出现 TypeError 提示。

TypeError: $(...).fadeTo is not a function，这意味着 Jquery javascript 对象 $("#success-alert") 没有附加 fadeTo 函数。

您可以在这里获得完整的缩小版：https://code.jquery.com/

来自https://code.jquery.com的片段

<script src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

PS：如果您不需要SRI，您可以删除integrity 和crossorigin 属性。

【讨论】：

谢谢。这就是问题所在。我只需要更改为完整版的 jquery，它就可以完美运行。
我想知道为什么很多涉及 jquery 的答案对我不起作用。谢谢，这让我可以使用很多以前无法使用的答案。