Question

编辑：添加了Handlebar模板加载

我正在尝试检测何时加载了动态添加的元素（来自手柄模板），但事件从未触发。

以下是代码：

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

正如您所发现的，加载模板时没有"ready"事件。

知道什么时候动态加载的准备就绪的通常解决方案是为正在进行加载的代码提供完成回调函数。调用该回调时，页面中的内容可用。我不确切知道你是如何加载把手模板的，但是我看到的用于加载模板的把手功能都采用了在成功加载模板后调用的回调参数。然后，您将从该回调中触发map逻辑。

如果您向我们展示了您用于加载模板的代码，我们可以更加具体。

现在，您已经向我们展示了代码，您的模板已经预先加载，您可以重新构建这样的代码，以便在fadeIn完成后立即添加映射内容：

var source = $('#mapTemplate').html();
var template = Handlebars.compile(source);
$('#wrapper').fadeOut(function() {
    $('#wrapper').html(template()).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);        
    });
});

Answer 2

您可以在调用插入车把模板后立即在页面上找到您的模板

$('#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);
    });
});

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

2 个答案: