來自加載了AJAX的頁面的jQuery自定義事件僅被調用一次

Question

我遇到了問題。 有一個帶有腳本的頁面可加載子頁面並記錄在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具有觸發自定義事件“ 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 loading ..”），觸發了自定義事件“ dataLoaded”，但處理程序僅調用了一次-首次ajax加載childPage。所有其他ajax調用均會加載子表單的上下文，記錄文本“ ChildPage已加載。觸發了dataLoaded事件”，觸發了事件“ dataLoaded”，但不再調用自定義事件的事件處理程序。 我希望每次加載子頁面並觸發自定義事件時，都會調用該事件的處理程序。

Answer 1

找到問題/解決方案。 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>

更改后，將處理在動態加載的頁面中觸發的自定義事件。

來自加載了AJAX的頁面的jQuery自定義事件僅被調用一次

問題描述

1 個解決方案

解決方案1
0 2016-01-31 02:34:54

來自加載了AJAX的頁面的jQuery自定義事件僅被調用一次

問題描述

1 個解決方案

解決方案1 0 2016-01-31 02:34:54

解決方案1
0 2016-01-31 02:34:54