是否有document.getElementById的替代方法来访问动态生成的元素？

Question

我有一个页面，前进按钮，后退按钮和谷歌地图。单击向前或向后按钮时，我不会重新加载页面，我只需更改以下标记内的HTML，

<div id="content"></div>

如果地图可用，则“content”div中的内容为

<div id="map" class="map"></div>

Google允许我使用

访问地图

var map = new google.maps.Map(document.getElementById('map') ...

第一次加载页面时这很好用，但是当我动态更改“内容”时，除非我重新加载页面，否则它不会加载地图。我尝试将其更改为document.querySelector（），结果相同。

我知道对于某些功能，例如使用按钮，我可以使用

访问它们

$('body').on( 'change', 'div.button', function()...

有没有办法访问/修改动态创建的非按钮元素？

Answer 1

创建地图新实例的代码可能只运行一次。更新#content div后，需要再次运行代码以实例化新地图（理想情况下，销毁先前的地图）。

您如何动态更新内容？例如，如果您使用jQuery.get()，则可以提供一个回调函数，该函数将在内容更新后运行。它在这里你想要加载地图。

Answer 2

jQuery在加载DOM时将事件绑定到元素。如果要将事件绑定到动态生成的HTML，则需要重新初始化事件或对未动态加载的父元素使用event delegation。您用于jQuery.on()的示例是正确的，但如果您想要定位除按钮之外的其他内容，只需将div.button更改为任何其他选择器即可。例如：

$('#parent-div').on('event', '.selector', function() {
    // do something
});

这实际上会将事件绑定到#parent-div，但只会在.selector触发事件时进行侦听。