克隆谷歌地址自动完成文本框答案

【问题标题】：clone google address autocomplete textbox克隆谷歌地址自动完成文本框
【发布时间】：2016-10-20 15:45:14
【问题描述】：

我有一个文本框，我附加了谷歌自动完成地址功能。克隆时，它正在克隆文本框......但无法在克隆的文本框上获得该自动完成功能。克隆功能在第一个文本框上工作，但在克隆后自动完成地址功能不起作用请帮助摆脱这个..

下面是我的代码..

我要克隆的文本框代码

     To Address:
    <div class="product-item">
         <div class="float-left"><input type="checkbox" name="item_index[]" /></div>
         <div>
        <?php
        echo $this->Form->input('to_address', array('required' => false,'label' => false, 'div' => false,
        'placeholder' => 'Enter to address', 'class' => 'form-control','id' => 'toaddress'));
        ?>
        </div> 
    </div>

 <input type="button" class = "readmore-btn" name="add_item" value="Add More" onClick="addMore();" />
<input type="button" class = "readmore-btn" name="del_item" value="Delete" onClick="deleteRow();" />

下面是google自动补全地址脚本。

    <script>
  function initialize() {     
        var address1 = (document.getElementById('toaddress'));       
        var autocomplete = new google.maps.places.Autocomplete(address1);
        //autocomplete.setTypes(['geocode']);
        //autocomplete.setTypes(['establishment']);
        google.maps.event.addListener(autocomplete, 'place_changed', function() {
            var place = autocomplete.getPlace();
            if (!place.geometry) {
                return;
            }

        var address = '';
        if (place.address_components) {
            address = [
                (place.address_components[0] && place.address_components[0].short_name || ''),
                (place.address_components[1] && place.address_components[1].short_name || ''),
                (place.address_components[2] && place.address_components[2].short_name || '')
                ].join(' ');
        }

        document.getElementById('tolat').value = place.geometry.location.lat();
        document.getElementById('tolong').value = place.geometry.location.lng();
        });
  }
   google.maps.event.addDomListener(window, 'load', initialize);
    </script>

下面是我的克隆函数

<script>
function addMore() {
    $(".product-item:last").clone().insertAfter(".product-item:last");  
}
</script>

【问题讨论】：

在新克隆的元素上重新初始化你的插件
这是一个基本错误，很多人没有意识到它在页面上必须是唯一的
将 id 更改为另一个 UNIQUE id 或使用类
@madalinivascu 请用代码示例写一个真实的答案，不要使用 cmets。
@Soviut 我现在无法创建完整的答案，当我有足够的信息时我会提供它

标签： javascript jquery

【解决方案1】：

在 HTML 中，ID 被认为是全局唯一的；应该只存在一个具有特定 ID 的元素。如果两个元素具有相同的 ID，就会发生不好的事情。

好

<div id="element1"></div>
<div id="element2"></div>

不好

<div id="element1"></div>
<div id="element1"></div>

任何通过 ID 选择元素（例如 getElementById()）的 JavaScript 将只找到第一个实例并忽略任何其他实例。如果同一页面上的多个相同元素做同样的事情，它们应该使用类。您可以使用getElementByClassName() 按类别查找这些元素。

当你克隆你的元素时，使用addClass() 将一个类添加到克隆中。然后您可以调用initialize()，但将getElementById() 替换为getElementByClassName()，搜索同一类。这会将您的自动完成应用于多个元素。

注意：您应该真正决定是使用原始 javascript 还是 JQuery，因为您将两者混合使用，这让您的生活变得更加艰难。您可以使用 JQuery 直接在 initialize() 内执行操作，但是，这超出了此答案的范围。

【讨论】：