Question

美好的一天。

我正在尝试使用以下代码在动态创建的输入上添加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>

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

Answer 1

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

改为使用appendChild：

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

Google动态输入自动填充功能

1 个答案: