Question

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

下面是我的代码..

我要克隆的文本框代码

     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>

Answer 1

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

不可

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

<强> BAD

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

任何按ID选择元素的JavaScript（例如getElementById()）只会找到第一个实例并忽略其他任何实例。如果同一页面上的多个相同元素执行相同的操作，则应使用类。您可以使用getElementByClassName()按类找到这些元素。

克隆元素时，使用addClass()向克隆添加类。然后，您可以拨打initialize()，但将getElementById()替换为getElementByClassName()，搜索同一个班级。这会将您的自动填充功能应用于多个元素。

注意：你应该真的决定你是否要使用原始的javascript或JQuery，因为你们混合使用它们会让你的生活变得更加艰难。你可以使用JQuery直接在initialize()内部行动，但这超出了这个答案的范围。

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

1 个答案: