Question

＆＃13;

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);
    }
});

＆＃13;

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

＆＃13;

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

现在，一旦从firebase调用和html注入中填充了这个父div，我就想在该父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中的追加包含回调所以你可能不得不这样做把脚本放在你要追加的html的末尾。

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

然后做：

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

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

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

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

2 个答案: