Javascript 函数在动态加载后未被调用

Question

我有一个奇怪的问题，希望有人能帮助解决。

问题

当我通过 .load() 函数动态加载 html 时，如果加载片段中 html 的任何方面试图访问原始 [=52] 中的 javascript 查询函数=] 页面，它不起作用。示例代码如下：

HTML 主页（main.html）

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
<!--javascript load functions etc... standard header stuff -->
</head>
<body>
<div id="dynamic_section_fragment"></div>
<a href="javascript:" onclick="loadFragment()">Load Fragment</a>

    <script type="text/javascript">


        // <![CDATA[
function loadFragment() {
            $("#dynamic_section_fragment").load("/api/fragment/");
        };

$(".checkvalue").click(function () {
            $.getJSON("/api/checkvalue", {term: $(this).attr('value')}, function () {
                console.info("submitted for checking");
            })
        });
        // ]]>
    </script>

</body>
</html>

片段文件（fragment.html）

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head lang="en">

    </head>
    <body>
<div th:fragment="check_value">
    <br/>
Check the value in the attribute field   
<br/>
<a href="javascript:" th:attr="value='123'" class="checkvalue">Check This<a/> 
</div>
    </body>
    </html>

SPRING MVC 控制器方法

@RequestMapping("/api/checkvalue")
public String getFragment(Model model) {
return "fragment :: check_value";
}

因此运行下行动：

-Main.html 页面加载

-用户点击加载片段超链接

-Javascript 将相关片段动态加载到 div

-用户点击检查此超链接，没有任何反应

有什么我遗漏的或需要注意的吗？

就好像 Thymeleaf 已经预先注册了所有可能的事件场景，不允许任何其他场景。我能够让它工作的唯一方法是在片段中注入 "checkvalue" javascript，你可以同意这是一种糟糕的做事方式。

感谢帮助。

Answer 1

您正在将点击事件侦听器应用于具有 checkvalue class 的所有现有对象。

$(".checkvalue").click(function ()

您更愿意做的（使点击事件动态地应用于所有现有的和任何新添加的）是在 dom 树中的父级上设置一个事件（父级都是现有的以及将添加的所有内容）。
在您的情况下，body 标签可能是安全的选择。

以下应该足够了：

$('body').on('click', '.checkvalue', function() { ...

简化后，代码将在 body 元素而不是 .checkvalue 对象上应用侦听器，每当单击具有 .checkvalue class 的对象时（无论是动态加载还是静态加载），该事件都会触发。

编辑
我还建议您，在您的 javascript 中，在您确定它已加载之前不要使用 jquery。
jquery 库有一种方法可以通过使用 $( document ).ready() 函数为您修复此问题：

$( document ).ready(function() {
  // All jquery dependant code here.
});

Javascript 函数在动态加载后未被调用

Javascript Function Not Being Called after dynamic loading

javascript

spring

thymeleaf