我有一个奇怪的问题，希望有人可以帮助解决。
问题
当我通过 .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 Controller 方法
@RequestMapping("/api/checkvalue")
public String getFragment(Model model) {
return "fragment :: check_value";
}
所以行动的概要:
-Main.html 页面加载
-用户单击“加载片段”超链接
-Javascript动态地将相关片段加载到div中
-用户单击“检查此”超链接，没有任何反应
有什么我遗漏的或者我需要注意的吗？
就好像 Thymeleaf 已经预先注册了所有可能的事件场景并且不允许任何其他场景。 我能够让它工作的唯一方法是在片段中注入(inject)“checkvalue”javascript，正如你所同意的，这是一种糟糕的做法。
感谢帮助。
最佳答案
您正在使用 checkvalue 类将单击事件监听器应用于所有现有对象。
$(".checkvalue").click(function ()
您更希望做的(使点击事件动态地应用于所有现有的和任何新添加的)是在 dom 树中的父级上设置一个事件(现有的和所有将要添加的父级)待补充)。
就您而言，body 标记可能是安全的选择。
以下内容就足够了:
$('body').on('click', '.checkvalue', function() { ...
简单来说，代码将在 body 元素而不是 .checkvalue 对象上应用监听器，并且每当对象具有 .checkvalue 时> 单击类(无论是动态加载还是静态加载)，都会触发该事件。
编辑
我还建议您在 javascript 中，在确定 jquery 已加载之前不要使用它。
jquery 库有一种方法可以为您解决此问题，方法是使用 $( document ).ready() 功能:
$( document ).ready(function() {
// All jquery dependant code here.
});
关于动态加载后未调用 JavaScript 函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29673748/