thymeleaf 页面布局 怎么把所有js文件放入一个页面

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了thymeleaf 页面布局 怎么把所有js文件放入一个页面相关的知识,希望对你有一定的参考价值。

参考技术A 这个用CSS的浮动解决,一个大DIV里三个小DIV,给三个小DIV都设置宽度并且都float:left就好了。如果为了兼容IE6,在为三个小DIV设置display:inline;

thymeleaf 片段渲染后重新加载 javascript

【中文标题】thymeleaf 片段渲染后重新加载 javascript【英文标题】:Reload javascript after thymeleaf fragment render 【发布时间】:2016-07-27 09:09:41 【问题描述】:

我在我的布局装饰器模板和装饰的各个页面的<head> 中定义了 javascript 文件。当我在我的一个页面中更新百里香片段时,父页面头部定义的 javascript 不再有效。是否有“刷新”这些 js 文件的标准方法?

谢谢。

补充说明:

我有一个由 ajax 调用提交的表单,它更新了页面中的一个表。我有一个针对更新表中的按钮的 Jquery onClick 函数。 javascript 似乎无法绑定到页面更新部分中的返回元素。我按元素类选择,可以看到选择在部分片段渲染之前有效。

【问题讨论】:

你的 JS 中有 $( document ).ready(function() 吗?假设是 JQuery。没有代码很难判断发生了什么。 我的 JS 中有 $( document ).ready(function() 。 这是在开发或部署期间发生的吗? 两种环境都受影响 没有代码真的很难说。 【参考方案1】:

对我来说,不清楚你的意思是什么

父页面头部定义的javascript不再起作用。

页面是在服务器上创建的。通常它包含 javascript 文件的 url

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

在这种情况下,“刷新”javascript文件只能在客户端发生。

在客户端检查页面的html。 标签是否符合预期? 所有预期的 javascript 文件都有标签吗?

使用浏览器工具(例如 Google Chrom 开发人员工具)检查所有脚本文件是否已实际加载。

如果这没有帮助,可能是脚本标签的顺序在第一次和第二次加载之间发生了变化。这可能会导致在浏览器中执行的 javascript 出现不同的行为。

编辑:

在初始加载时,您将 javascript 回调绑定到 dom 元素。

您可以直接或通过 Jquery 或其他库执行此操作。

当一个新的 dom 元素被加载时,它没有绑定回调,即使它与被替换的 dom 元素具有相同的 id。

所以在加载之后你必须再次绑定你的回调。

如果您“手动”绑定它们,只需重新绑定即可。

如果您使用的是创建绑定的 JQuery 插件,请查看代码或文档,其中许多都有相应的功能,或者您可以再次调用初始化。

【讨论】:

我有一个由 ajax 调用提交的表单,它更新了页面中的一个表。我有一个针对更新表中的按钮的 Jquery onClick 函数。 javascript 似乎无法绑定到页面更新部分中的返回元素。我按元素类选择,可以看到选择在部分片段渲染之前有效。 加载后需要“重新绑定”事件。像 $("#controls").off("click"); $("#controls").on("点击", function() );【参考方案2】:

向 DOM 添加新内容后,您需要再次绑定新内容。

假设我有一个带有某个类的按钮,事件绑定到该类:

<button class="someclass">Button 1</button>

<script>
    var something = function() 
        // do something
    ;
    $(".someclass").on("click", something);
</script>

如果我将更多来自同一类的按钮添加到 DOM,它们将不会绑定 click 事件。因此,一旦您通过 ajax 加载新内容,还要删除所有绑定并再次添加(您需要删除,否则您将拥有带有 2 个事件的按钮)。

    $(".someclass").off("click");
    $(".someclass").on("click" , something);

【讨论】:

以上是关于thymeleaf 页面布局 怎么把所有js文件放入一个页面的主要内容,如果未能解决你的问题,请参考以下文章

Thymeleaf利用layout.html文件生成页面布局框架

使用 thymeleaf 用父布局包装模板

thymeleaf的th:each怎么遍历js中的数组?

thymeleaf 片段渲染后重新加载 javascript

HTML网页布局里,鼠标放上去时,页面如何实现导航栏下面内容的切换(HTML+CSS网页布局)

前端怎么快速筛选页面没用的js和css文件