Question

通过ajax加载返回主内容后，函数onload未运行。我能理解为什么，但是如何让它在那种条件下运行呢？

<script type="text/javascript">
        onload = function() {
            if (!document.getElementsByTagName || !document.createTextNode) return;
            var rows = document.getElementById('chat').getElementsByTagName('tr');
            for (i = 0; i < rows.length; i++) {
                rows[i].onclick = function() {
                    $("#chat_main").load("chat", {
                       m: this.id,
                       ajax: 1 //here we are loading another page
                   });
                }
            }
        }
    </script>
    <script>
        function return_to_main() {
            $("#chat_main").load("chat", {
                ajax: 1 //here we trying to load back main page
            });
        }
    </script>

P.S。 return_to_main()绑定在input type="button"

Answer 1

您绑定了window.onload调用。每次更新页面内容时都不会神奇地调用它。它只被调用一次。每次希望代码运行时都需要调用一个函数。因此，当Ajax调用完成后，您将触发它。

但你正在使用jQuery，所以使用它。

没有理由需要绑定到表中的每一行。使用事件委派。现在，当内容发生变化时，您仍然会绑定事件。

$( function () {  //document ready
    var chatMain = $("#chat_main");
    chatMain.on("click", "table tbody tr", function () {  //listen for clicks on table row
        chatMain.load("chat",
            {
                m: this.id,
                ajax: 1 //here we are loading another page
            }
        );
    });
});

Answer 2

请求后调用您的函数：

$("#chat_main").load("chat", {
    ajax: 1 //here we trying to load back main page
}).done(onload); // <--

如果.load未产生承诺，请使用：

$("#chat_main").load("chat", {
    ajax: 1 //here we trying to load back main page
}, onload); // <--

ajax加载后的Javascript onload

2 个答案: