javascript - 如何检测动态添加的元素何时加载？

Question

编辑:添加了 Handlebar 模板加载

我正在尝试检测何时加载了动态添加的元素(从 Handlebars 模板)，但该事件从未触发。

代码如下:

var source = $('#mapTemplate').html();
var template = Handlebars.compile(source);
$('#wrapper').fadeOut(function() {
    $('#wrapper').html(template());
    $('#wrapper').fadeIn();
});
$('body').on('ready', '#mapCanvas', function() {
        alert('Ready')
        var mapOptions = {
            center: new google.maps.LatLng(-34.397, 150.644),
            zoom: 8
        };
        var map = new google.maps.Map(document.getElementById("mapCanvas"),mapOptions);
    })

我做错了什么？

Answer 1

在调用插入 Handlebars 的模板后，您的模板立即在页面上可用

$('#wrapper').html(template());
//#mapCanvas should be available 

但是，您可能会遇到错误，因为您告诉 div 淡入并且 jQuery 使其最初不可见。请务必等到 fadeIn 结束。

var source = $('#mapTemplate').html();
var template = Handlebars.compile(source);
$('#wrapper').fadeOut(function() {
    $('#wrapper').html(template());
    $('#wrapper').fadeIn(function() {
        var mapOptions = {
            center: new google.maps.LatLng(-34.397, 150.644),
            zoom: 8
        };
        var map = new google.maps.Map(document.getElementById("mapCanvas"),mapOptions);
    });
});