I stack with a problem. There is a page with script to load child page and log custom event which is triggered in Subform.
----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" ----
<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. 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? I expect that every time child page loaded and custom event triggered, handler for it will be invoked.
Problem/solution found. Subform.aspx was an HTML page with JQuery script reference tag in header. When subform gets loaded into parent #container div - subform reloaded jQuery and handler got lost.
Solution was easy - in subform.aspx remove
<script>tag and all other tags which can make main document invalid, like body, html, header. Leave only content, somewhat like thisAfter this change custom event triggered in dynamically loaded page got handled.