Question

我对百里香和春天很新。这是我正在使用的代码。这个javascript在代码中不起作用。有人能告诉我会出现什么问题。如果我使用错误的百里香参考，请纠正我。

    <script th:inline="javascript">
            //<![CDATA[
                    // Javascript to enable link to tab
                    var hash = document.location.hash;
                    var prefix = "tab_";
                    if (hash) {
                        $('.nav-tabs a[href=' + hash.replace(prefix, "") + ']').tab('show');
                    }

                    // Change hash for page-reload
                    $('.nav-tabs a').on('shown', function(e) {
                        window.location.hash = e.target.hash.replace("#", "#" + prefix);
                    });
                  //]]> 
                </script>  
            <script th:inline="javascript">
          //<![CDATA[
            $("#example-advanced").treetable({ expandable: true });

              // Highlight selected row
              $("#example-advanced tbody").on("mousedown", "tr", function() {
                $(".selected").not(this).removeClass("selected");
                $(this).toggleClass("selected");
              });


        //]]> 
            </script>

这适用于静态页面。但是在制作动态时，它并没有按预期工作。

Answer 1

Crazeaboutlife，什么exaclty不工作？

使用Thymeleaf特殊语法，文本/<![CDATA[不会从动态页面中消失。内联点是允许您使用特殊语法进行动态处理：/*[[...]]*/

例如，如果我的消息中有：

page.home.header=Page

然后我的代码如下：

<script th:inline="javascript">
  //<![CDATA[
    var heder = /*[[${page.home.header}]]*/'Static';
  //]]> 
</script>

将被处理为：

<script th:inline="javascript">
  //<![CDATA[
    var heder = 'Page';
  //]]> 
</script>

希望能解决你的问题：）

Answer 2

尝试围绕它：

 $(document).ready(function(){  /*Place your code here*/ })

最常见的错误 - 当文档可能尚未加载时，您正在声明JS。

没有更多JS代码的第二个选项是将延迟属性添加到脚本标记，它将告诉浏览器仅在加载所有DOM之后运行脚本。

您可以在此处找到更多知识： How exactly does <script defer="defer"> work?

当它作为动态页面时，Javascript在Thymeleaf文件中不起作用

2 个答案: