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自動完成不能動態添加輸入框

回答

相關問題