0

我有一个问题。有一个带有脚本的页面，用于加载子页面并记录在子表单中触发的自定义事件。

----默认.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 加载了 childPage。所有其他 ajax 调用加载子表单的上下文，记录文本“已加载 ChildPage。触发了 dataLoaded 事件”，触发了事件“dataLoaded”，但不再调用自定义事件的事件处理程序。这里发生了什么？我希望每次加载子页面并触发自定义事件时，都会调用它的处理程序。

4

1 回答 1

0

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

解决方案很简单 - 在 subform.aspx 中删除<script>标签和所有其他可能使主文档无效的标签，如正文、html、标题。只留下内容，有点像这样

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

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

于 2016-01-31T02:34:54.767 回答