Question

我堆叠了一个问题。有一个页面包含用于加载子页面的脚本和在子窗体中触发的日志自定义事件。

---- ---- Default.aspx的

<body>
<input type="button" class="clickable" value="Load child doc" />
<hr />
<div id="container"></div>
</body>

<script>
var clickHandler = function () {
    $.ajax("Subform.aspx", {
        method: "GET",
        success: function (data) {
            $('#container').html(data);
        }
    });
}

$(function () {
    $('body').on('click', clickHandler);

    $('body').on("dataLoaded", function (param) {
        console.info("Custom event triggered", param);
    })
});

---- Subform.aspx有脚本触发自定义事件“dataLoaded”----

<html>
<header>
    <script src="scripts/jquery-1.7.1.js"></script> 
</header>
<body>
..context of Subform...
<script>
        $(function () {
            $('body').trigger("dataLoaded", { key: "value from sub form" });
            console.log("ChildPage loaded. dataLoaded event triggered")
        })
    </script>
 .....
 </body>
 </html>

问题是，在子窗体加载到容器中（并且文件准备好在ajax加载的文件中触发 - 我看到消息：“childPage loaded ..”），自定义事件“dataLoaded”被触发，但处理程序只调用一次 - 第一次ajax加载的子页面。所有其他ajax调用子窗体的加载上下文，记录文件“加载了ChildPage。触发了dataLoaded事件”，触发了事件“dataLoaded”，但不再调用自定义事件的事件处理程序。这里发生了什么？我希望每次加载子页面和触发自定义事件时，都会调用它的处理程序。

Answer 1

发现问题/解决方案。 Subform.aspx是一个HTML页面，标题中包含JQuery脚本引用标记。当子表单被加载到父#container div时 - 子表单重新加载jQuery并且处理程序丢失了。

解决方案很简单 - 在subform.aspx中删除<script>标记以及所有其他可能使主文档无效的标记，如body，html，header。只保留内容，有点像这样

<div>
SubForm
    Ajax response....
<script>
    $(function() {
        debugger;
        $('#container').trigger("dataLoaded", { key: "value from sub form" });
        console.log("ChildPage loaded. dataLoaded event triggered");
    });
</script>

此更改后，动态加载页面中触发的自定义事件得到处理。

来自加载了AJAX的页面的Jquery自定义事件只调用一次

1 个答案: