Google会在克隆元素上映射自动完成功能

时间:2015-11-23 03:25:31

标签: javascript jquery google-maps google-maps-api-3 google-maps-autocomplete

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

的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地图自动填充功能不适用。如何使克隆元素上的Google地图自动完成工作?

1 个答案:

答案 0 :(得分:0)

我使用带有以下代码的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);
})