捕获元素"load"使用jQuery为append()-ed元素添加事件

Catching an element "load" event for append()-ed elements using jQuery?

本文关键字：quot 元素 -ed 添加 append 事件 使用 load jQuery      更新时间：2023-09-26

所以，我有一个div (id="content")，我从AJAX请求中加载各种其他HTML。我希望能够告诉他们何时加载成功，但加载事件似乎不与append()工作。

我有这个简化的示例来说明这种情况(在实际情况中，'load'事件的侦听器注册在脚本部分加载的不同文件中)

<html>
<head>
    <script
        type="text/javascript"
        src="http://code.jquery.com/jquery-latest.min.js">
    </script>
</head>
<body>
    <div id="content"><div>
    <script type="text/javascript">
        $(document).ready( function () {
            // this does not seem to work
            $("#myDiv").on('load', function () {
                console.log("myDiv loaded");
            });
            // neither does this
            $("#content").on('load', "#myDiv", function () {
                console.log("myDiv loaded by delegation");
            });
            // the content to append will come from the network
            $("#content").append($("<div id='myDiv'>myDiv</div>"));
        });
    </script>
</body>
</html>

当然，实际情况要复杂得多(加载的数据可以是任何东西)，所以这些都不是有效的选项:

  • 在div加载后调用一个函数
  • 在加载的代码中嵌入了一个函数(代码是从模板文件生成的)

如果从Ajax请求中获取数据，则应该实际使用Ajax done()函数。由于调用是异步的，所以你不能监听div中的更改。另一个解决方案是在div上添加body委托，并使其监听更改事件。

$("body").delegate("mydividentifier", "change", function(f){});
$.ajax().done(function(f){});
相关文章：