div被动态填充后调用函数？

Question

firebase.database().ref('zones').on('value', (snapper) => {
    //For each zone, populate HTML
    snapper.forEach((snap) => {
       var html = '<div id="child">Blahblah</div>';
       //Add the Injected HTML to the parent div called 'new'
       $("#parent").append(html);
    }
});

<!-- this is the parent div where I inject my HTML from JS -->

<div id="parent">

</div>

我有一个通过 Firebase 查询动态填充的 div。我的 firebase 查询检索我使用 $("#parent").append(html) 注入 HTML 的数据。

现在，一旦这个父 div 全部从 firebase 调用和 html 注入中填充，然后我想在该父 div 上运行一个函数 - 它基本上按数字对每个子 div 进行排序。

在运行我想要的函数之前，我似乎无法弄清楚如何等待父 div 完成填充。我知道由于异步操作，我的函数在父 div 甚至被填充之前运行，因此我的问题......

Answer 1

既然您关心呼叫何时结束，为什么不使用.once（在docs 中找到）将读取数据并返回一次。这样，当它返回时，您就知道您拥有所有数据，然后可以对其进行排序

firebase.database().ref('zones').once('value').then(function(snapper) {
    //For each zone, populate HTML
    snapper.forEach((snap) => {
            var html = '<div id="child">Blahblah</div>';
            //Add the Injected HTML to the parent div called 'new'
            $("#parent").append(html);
    });
    // call sort function
});

Answer 2

我不认为 jquery 中的 append 包含回调，因此您可能必须 将脚本放在要附加的 html 的末尾。

    html = html.append('<script>yourfunctiontorunattheend();</' + 'script>');

然后做：

    $("#parent").append(html)

编辑： 在 for 语句之后运行（参见 cmets）：

string lcscript = '<script>yourfunctiontorunattheend();</' + 'script>'
for () {
 ...
}
$("#parent").append(lcscript);