thymeleaf 片段渲染后重新加载 javascript
Posted
技术标签:
【中文标题】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 片段渲染后重新加载 javascript的主要内容，如果未能解决你的问题，请参考以下文章
Spring boot：thymeleaf 没有正确渲染片段
Java 列表项在页面重新加载时重新添加到 thymeleaf 下拉列表中，多次出现