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文件（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已预先注册了所有可能的事件情景，并且不允许任何其他事件。我能够让它发挥作用的唯一方法是注入＆＃34; checkvalue＆＃34;片段中的javascript，你可以同意这是一种糟糕的做事方式。

非常感谢帮助。

Answer 1

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

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

您希望做什么（使click事件适用于所有现有的和动态添加的新事件）是在dom树中的父项上设置事件（父项既包括现有项也包括所有项加上）在您的情况下，body标记可能是安全的赌注。

以下内容应该足够了：

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

简化后，代码将在body元素而不是.checkvalue对象上应用侦听器，并且每当单击具有.checkvalue类的对象时（动态或静态加载），事件将开火。

修改
我还建议您在使用jquery之前不要使用jquery，以确定它已被加载 jquery lib有一种方法可以使用$( document ).ready() 函数来解决这个问题：

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

动态加载后未调用Javascript函数

1 个答案: