jquery自动完成不能动态添加输入框

这是我正在尝试做的事情。我想添加jQuery自动完成到所有的输入框。最初我只有2个盒子，用户可以动态地添加多个盒子。自动填充在前两个框中工作，但在动态添加的按钮中失败。jquery自动完成不能动态添加输入框

她的小提琴的代码：

代码：

HTML：

<!doctype html> 
<html> 

    <head> 
     <title>TakeMeHome</title> 
     <!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> --> 
     <!--<script type="text/javascript" src="js/jquery-1.9.0.js"></script> 
     <script type="text/javascript" src="js/jquery-ui-1.10.0.custom.js"></script> 
     <script type="text/javascript" src="js/jquery-ui-1.10.0.custom.min.js"></script>--> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script> 
     <script type="text/javascript" src="js/app.js"></script> 
     <link type="text/css" rel="stylesheet" href="css/design.css"/> 



    </head> 

    <body> 
     <center> 
       Your Place:<input class="address" id="source" type="text"/><br/> 
       <div id= "div1">Friend1:<input class="address" id="friend1" type="text"/></div><br/> 
       <pre> 
       <div id="button">Add!</div> <div id="button2">Remove</div></br> 
      </pre> 
      <div id="sumbit_button">GO!</div> 
      <div id="map" style = "width: 500px; height: 500px"></div> 

     </center> 

    </body> 

</html>

$(document).ready(function() { 

var geocoder; 
var map; 
var marker; 
var friends_cnt = 1; 
var friends = []; 
var distance = []; 

$('#button').click(function() { 
    if (friends_cnt < 11) { 
     $('<div id = div' + (friends_cnt + 1) + '>Friend' + (friends_cnt + 1) + ':<input type="text" class="address" id="friend' + (friends_cnt + 1) + '"/></div>').insertAfter('#div' + friends_cnt); 
     friends_cnt++; 
    } else { 
     console.log("Limit reached"); 
    } 
}); 

$('#button2').click(function() { 
    if (friends_cnt > 1) { 
     $('#friend' + friends_cnt).remove(); 
     $('#div' + friends_cnt).remove(); 
     friends_cnt--; 
    } 
}); 

geocoder = new google.maps.Geocoder(); 

$(function() { 
    $(".address").autocomplete({ 
     source : function(request, response) { 
      geocoder.geocode({ 
       'address' : request.term 
      }, function(results, status) { 
       response($.map(results, function(item) { 
        return { 
         label : item.formatted_address, 
         value : item.formatted_address, 
         latitude : item.geometry.location.lat(), 
         longitude : item.geometry.location.lng() 
        } 
       })); 
      }) 
     }, 
    }); 
}); 

$('#sumbit_button').on("click", function() { 
    console.log("button clicked"); 
    var a = []; 
    a.push($("#source").val()); 
    for (i = 1; i <= friends_cnt; i++) { 
     a.push($("#friend" + i).val()); 
    } 

    console.log("a :"); 
    console.log(a); 

    var gurl = "http://maps.googleapis.com/maps/api/distancematrix/json"; 

    console.log("gurl :" + gurl); 
    $.ajax({ 
     url : gurl, 
     data : { 
      origins : a.join('|').replace(/ /g, '+'), 
      destinations : a.join('|').replace(/ /g, '+'), 
      sensor : false 
     }, 
     success : function(response) { 
      console.log("response type :"); 
      console.log(typeof response); 
      if (typeof response == "string") { 
       response = JSON.parse(response); 
      } 
      var rows = response.rows; 
      for (var i = 0; i < rows.length; i++) { 
       distance[i] = []; 
       for (var j = 0; j < rows[i].elements.length; j++) { 
        distance[i][j] = rows[i].elements[j].distance.value; 
       } 
      } 
     } 
    }); 
    console.log("No.of friends is " + friends_cnt); 
    console.log(distance); 
});

}）;

CSS

input { 
margin: 10px 4px; 
} 

#button, #button2 { 

    width: 70%; 
    margin: 0 auto; 
} 

.ui-autocomplete { 
    background-color: white; 
    width: 300px; 
    border: 1px solid #cfcfcf; 
    list-style-type: none; 
    padding-left: 0px; 
} 

.ui-helper-hidden-accessible { 
    display: none; 
}

由于我使用类概念增添自动完成，我应该得到的结果。

你能让我知道我错了吗？

来源

2013-03-06 user1263375

在点击事件：

$('#button').click(function()...

你应该设置你的自动完成上新添加的输入框，像：

$('#button').click(function() { 
     if (friends_cnt < 11) { 

     $('<div id = div'+(friends_cnt+1)+'>Friend' + (friends_cnt+1) + ':<input type="text" class="address" id="friend' + (friends_cnt+1) + '"/></div>').insertAfter('#div'+friends_cnt); 

     $('div#div'+(friends_cnt+1)).autocomplete(...); 

     friends_cnt++; 

    } 

    else { 
     console.log("Limit reached"); 
    } 

});

当你的自动完成attachs到当前的DOM而已，而不是动态添加一。

来源

2013-03-06 13:24:02 apoq

但因为我命名为class =“address”的所有新元素，不应该这样工作吗？你是说我应该为每个新添加的盒子添加自动完成功能吗？ – user1263375 2013-03-06 13:28:04

不，它不应该那样工作。正如我所说，它只附加到_current_元素。 – apoq 2013-03-06 13:30:29

在页面加载时，您的自动完成附加到带有.address类的字段，但是在页面加载时，您没有任何.address字段，因此没有附加任何内容。

你需要运行

$(".address").autocomplete({

您将新字段添加紧接着到DOM，或者更好的是，使输入的对象，你可以将直奔它的事件，如：

$input = $('input') 
      .attr('type', 'text') 
      .attr('class', 'address') 
      .attr('id', 'friend') 
      .autocomplete({ etc

来源

2013-03-06 13:33:04

您必须重新自动完成应用到每个元素像卡波建议

$('div#div'+(friends_cnt+1)).autocomplete(...);

或u SE liveuery（见this thread关于更多的细节）

来源

2013-03-06 13:33:28 mcgrailm

由于我得到了答案，这种变化的代码为我工作：在$('#button').click(function() {功能添加此

$(function() { 
    $("#friend"+(friends_cnt+1)).autocomplete({ 
     source: function(request, response) { . .. . .

这将增加自动完成所有无论何时制作。

来源

2013-03-06 13:42:52 user1263375

jquery自动完成不能动态添加输入框

回答

相关问题