谷歌在克隆元素上映射自动完成

Question

当有人点击添加更多按钮时，我有此代码来克隆我的输入字段。

javascript

$(".multipleunitaddress").each(function(){
  var multipleunitaddressinput = $(this).get(0);
  autocomplete2 = new google.maps.places.Autocomplete(multipleunitaddressinput, 
  {
    componentRestrictions: {country: "nz"}
  });
});


$("#addmore").click(function(){
  var newelement = $("#multipleunitaddress").clone();
  $(this).before(newelement);
  autocomplete3 = new google.maps.places.Autocomplete(newelement,                                                      
  {
    componentRestrictions: {country: "nz"}
  });
})

html

<div class="controls" id="multipleunitaddresswrapper">
  <input type="text" id="multipleunitaddress" class="multipleunitaddress" name="multipleunitaddress" value="" class="required" placeholder="Property's Google-safe address" autocomplete="off">

  <button id="addmore" class="btn btn-danger">Add more</button>
</div>

默认输入运行谷歌地图自动完成正常。添加更多按钮克隆我的输入。但是，对于新的克隆输入，谷歌地图自动完成不适用。如何使 Google 地图自动完成功能适用于克隆元素？

Answer 1

我通过以下代码使用 livequery 让它工作

html

  <div class="controls">
    <div class="multipleunitaddresswrapper">
      <input type="text" class="multipleunitaddress" name="multipleunitaddress" value="" class="required" autocomplete="off">
    </div>
    <button id="addmore" class="btn btn-danger" type="button">Add more</button>
  </div>

javascript

$(".multipleunitaddress").livequery(function()
  {
    var multipleunitaddressinput = $(this).get(0);
    autocompleteInput = new google.maps.places.Autocomplete(multipleunitaddressinput, 
   {
    componentRestrictions: {country: "nz"}
  });
});

$("#addmore").click(function(){
  var newelement = $(this).prev(".multipleunitaddresswrapper").clone();
  newelement.find("input").val("");
  $(this).before(newelement);
})