JavaScript 函数未在 Thymeleaf 中加载？

Question

我想在 Thymeleaf 和 HTML 代码中调用 Java 脚本函数

<a class='btn btn-default btn-xs' href='#' role='button' th:id="view-notification">
  View Notification
</a>
<a href="index.php?cat=notifications">
  Notifications
  <span class="badge" th:id="notification-badge">1</span>
</a>

这是我的 Java 脚本函数，我已将其正确包含(我希望如此)在我的 html 文件中

<th:block th:fragment="scripts">
  <script th:inline="javascript">
    $('#view-notification').click(function () {
      $('#notification-badge').hide();
    });
  </script>

我检查了 html 页面，发现 js 没有加载。我的代码有什么问题吗？

Answer 1

按钮下面的脚本代码是在html里面吗？否则脚本无法注册监听器。我猜当脚本运行时，按钮还没有出现。您可以尝试将脚本包装在ready函数中。

$(document).ready(function() {
   $('#view-notification').click(function () {
       $('#notification-badge').hide();
   });
});

另一个解决方案是在窗口上设置监听器并监听 ID 上的点击。这甚至可以让您稍后更改代码并使用 ajax 调用呈现按钮。