动态输入的 Google Places 自动完成答案

【问题标题】：Google Places Autocomplete on dynamic inputs动态输入的 Google Places 自动完成
【发布时间】：2013-04-09 21:51:10
【问题描述】：

美好的一天。

我正在尝试使用以下代码在动态创建的输入上添加 Google 地方信息自动完成功能：

<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
var _autoComplCounter = 0;

function assignAutoCompl(_id)
{
    var _autocomplete = new google.maps.places.Autocomplete(document.getElementById(_id));
    _autocomplete.setTypes(['geocode']);
    google.maps.event.addListener(_autocomplete, 'place_changed', function()
    {
        //processing code
    });
}

function CreateElem()
{
    var _id = "AutoCompl" + _autoComplCounter;
    _autoComplCounter++;

    var container = document.getElementById('AutoComplInputs');
    container.innerHTML += "<br>" + _id;

    var _elem_for_upd = document.createElement("input");
    _elem_for_upd.type = "text";
    _elem_for_upd.id = _id;
    container.appendChild(_elem_for_upd);

    assignAutoCompl(_id);
}
</script>
</head>
<body>
    <div id="AutoComplInputs"></div>
    <input type='button' value='Add' onclick='CreateElem();'>
</body>
</html>

但是当我按下按钮时，自动完成功能仅适用于最后一次输入，并且所有 prevoius 都会损坏。我认为它可以连接到输入的动态创建，因为下面的代码可以正常工作：

<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
var _autoComplCounter = 0;

function assignAutoCompl(_id)
{
    document.getElementById(_id).hidden = false;
    var _autocomplete = new google.maps.places.Autocomplete(document.getElementById(_id));
    _autocomplete.setTypes(['geocode']);
    google.maps.event.addListener(_autocomplete, 'place_changed', function()
    {
        //processing code
    });
}

function CreateElem()
{
    assignAutoCompl("AutoCompl0");
    assignAutoCompl("AutoCompl1");
}
</script>
</head>
<body>
    <div id="AutoComplInputs">
        <input id="AutoCompl0" type="text" hidden>
        <input id="AutoCompl1" type="text" hidden>
    </div>
    <input type='button' value='Add' onclick='CreateElem();'>
</body>
</html>

我不明白我做错了什么......

【问题讨论】：

标签： javascript dynamic google-maps-api-3 autocomplete google-places-api

【解决方案1】：

不要使用innerHTML 向container 添加内容，您将丢失所有绑定到现有元素的处理程序。

改用 appendChild：

container.appendChild(document.createElement('br'));
container.appendChild(document.createTextNode(_id));

【讨论】：