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



我在布局装饰器模板的<head>和被装饰的各个页面中都定义了javascript文件。当我更新其中一个页面中的thymelaf片段时,在父页面头部定义的javascript不再工作。有没有一种标准的方法来"刷新"这些js文件?

谢谢。

附加说明:

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

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

在父页面头部定义的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插件,它制作了绑定,请查看代码或文档,其中许多插件都有相应的函数,或者您可以再次调用初始化。

将新内容添加到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);

最新更新