使用 jQuery 为 append()-ed 元素捕获元素“加载”事件？答案

【问题标题】：Catching an element "load" event for append()-ed elements using jQuery?使用 jQuery 为 append()-ed 元素捕获元素“加载”事件？
【发布时间】：2014-08-25 13:42:52
【问题描述】：

所以，我有一个 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 后调用函数
在加载的代码中嵌入了一个函数（代码是从模板文件生成的）

【问题讨论】：

div 没有要附加的 onload 事件，因此它不会被触发。
试试看这些：jQuery callback after append、How to simulate an append callback function?、jQuery function after .append。

标签： javascript jquery load append onload

【解决方案1】：

如果您从 Ajax 请求中获取数据，您实际上应该使用 Ajax done() 函数。由于调用是异步的，因此您将无法监听 div 中的更改。另一种解决方案是在 div 上添加一个 body 委托并使其监听 change 事件。

$("body").delegate("mydividentifier", "change", function(f){});
$.ajax().done(function(f){});

【讨论】：

这实际上启发了我在 ajax done() 回调中触发自定义事件并监听它而不是“加载”事件。这似乎有效，谢谢！
如果您愿意，您可以投票并将其标记为正确:)
不幸的是，我不能投票，需要建立更多的声誉:(