来自加载了AJAX的页面的jQuery自定义事件仅被调用一次
[英]Jquery Custom event from page loaded with AJAX called only once
问题描述
I stack with a problem. 
我遇到了问题。 There is a page with script to load child page and log custom event which is triggered in Subform. 有一个带有脚本的页面可加载子页面并记录在Subform中触发的自定义事件。
----Default.aspx---- ---- 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 has script which triggers custom event "dataLoaded" ---- ---- 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>
Issue is that after subform loaded into container (and document ready triggered in ajax-loaded file - I see message: "childPage loaded.."), custom event "dataLoaded" triggered, but handler called only once - first time ajax loaded childPage. 问题是子窗体加载到容器中之后（并且文档准备好在ajax加载的文件中触发-我看到消息：“ childPage loading ..”），触发了自定义事件“ dataLoaded”，但处理程序仅调用了一次-首次ajax加载childPage。 All other ajax calls load context of the subform, text "ChildPage loaded. dataLoaded event triggered" is logged, event "dataLoaded" triggered but event handler for custom event is not called anymore.. Whats going on here? 所有其他ajax调用均会加载子表单的上下文，记录文本“ ChildPage已加载。触发了dataLoaded事件”，触发了事件“ dataLoaded”，但不再调用自定义事件的事件处理程序。 I expect that every time child page loaded and custom event triggered, handler for it will be invoked. 我希望每次加载子页面并触发自定义事件时，都会调用该事件的处理程序。
1 个解决方案
解决方案1
0 2016-01-31 02:34:54
Problem/solution found. 找到问题/解决方案。 Subform.aspx was an HTML page with JQuery script reference tag in header. Subform.aspx是一个HTML页，在标头中带有JQuery脚本参考标记。 When subform gets loaded into parent #container div - subform reloaded jQuery and handler got lost. 当子表单加载到父#container div中时，子表单重新加载了jQuery，并且处理程序丢失了。
Solution was easy - in subform.aspx remove <script> tag and all other tags which can make main document invalid, like body, html, header. 解决方案很容易-在subform.aspx中删除<script>标记和所有其他可能使主文档无效的标记，例如正文，html，标头。 Leave only content, somewhat like this 只留下内容，像这样
<div>
SubForm
Ajax response....
<script>
$(function() {
debugger;
$('#container').trigger("dataLoaded", { key: "value from sub form" });
console.log("ChildPage loaded. dataLoaded event triggered");
});
</script>
After this change custom event triggered in dynamically loaded page got handled. 更改后，将处理在动态加载的页面中触发的自定义事件。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.