在thymeleaf片段渲染后重新加载javascript

时间:2016-04-06 18:58:25

标签: spring-boot thymeleaf

我的布局装饰模板的<head>和我装饰的各个页面都定义了javascript文件。当我更新我的一个页面中的百万美元片段时,在父页面的头部定义的javascript不再有效。是否有标准的方式来刷新&#39;这些js文件?

感谢。

补充说明:

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

2 个答案:

答案 0 :(得分:0)

对我来说,目前还不清楚你的意思

  

在父页面的头部定义的javascript不再有效。

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

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

在这种情况下,刷新&#39; javascript文件只能在客户端中发生。

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

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

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

编辑:

使用初始加载,您可以将javascript回调绑定到dom元素。

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

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

因此在加载后你必须再次绑定你的回调。

如果你手动绑定它们,只需再绑定它。

如果您使用的是JQuery插件,它会创建绑定,请查看代码或文档,其中许多都有一个函数,或者您可以再次调用初始化。

答案 1 :(得分:0)

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

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

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

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

如果我将同一个类中的更多按钮添加到DOM,则他们将没有绑定的点击事件。所以一旦你通过ajax加载新内容,也删除所有绑定并再次添加(你需要删除或者你将有2个事件的按钮)。

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