动态加载后未调用Javascript函数

Question

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

问题

当我通过 .load() 函数动态加载 html 时，如果加载的片段中的 html 的任何方面试图访问原始 HTML 页面中的 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

您正在将 click 事件侦听器应用到具有 checkvalue 类的所有现有对象。

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

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

以下内容就足够了：

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

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

---

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

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