4

再会。

我正在尝试使用以下代码在动态创建的输入上添加 Google Places Autocomplete：

<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>

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

<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>

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

4

1 回答 1

0

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

改用 appendChild：

container.appendChild(document.createElement('br'));
container.appendChild(document.createTextNode(_id));
于 2013-04-17T09:38:50.620 回答