JavaScript 不适用于 bootstrap 4 + thymeleaf
Posted
技术标签:
【中文标题】JavaScript 不适用于 bootstrap 4 + thymeleaf【英文标题】：JavaScript doesn't work with 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 才能正确运行它。 【参考方案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 的答案对我不起作用。谢谢，这让我可以使用很多以前无法使用的答案。以上是关于JavaScript 不适用于 bootstrap 4 + thymeleaf的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap 4轮播不适用于AngularJS UI-Bootstrap
Bootstrap 3 hidden-* 不适用于中间窗口大小