Question

我正在尝试动态创建输入文本字段。使用jquery我能够生成输入字段，但每当用户尝试单击任何动态创建的字段时，他的指针会自动移动到第一个字段。现在只需使用TAB键，他就可以导航到特定字段并输入详细信息。

Here是体验我所面对的小提琴。

这是代码

HTML

<head>    
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
</head>

<body>

 <label><div id= "div1"><input  class="address" id="friend1" type="text"></div></label>    
<div id='wrapper2'><div id="button2" class='removebutton'>Remove</div><div id="button">Add!</div></div>        
<div id="submit-button" >GO!</div>
    </body>

JS

$(document).ready(function()
{
          var friends_cnt = 1;

    $('#wrapper2').on('click','#button',function ()   
                        {                 
                            clicknum = 0;
                            if (friends_cnt < 11) 
                            {
                              $('<div  id = div'+(friends_cnt+1)+'><input type="text" class="address"  id="friend' + (friends_cnt+1) + '"></div>').insertAfter('#div'+friends_cnt);        
                              $(function() {
                               $("#friend"+(friends_cnt+1)).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()
                                        }
                                      }));
                                    })
                                  },
                                });
                              });    
                             friends_cnt++;
                          }
                          else 
                          {

                          }

                        });



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

                        });

});

Answer 1

原因是html问题。我已经移动了label这样的关闭代码：

  <div id= "div1"><label></label><input  class="address" id="friend1" type="text" /></div>

现在指针没有跳跃，看：

http://jsfiddle.net/g84t4/4/

动态创建的输入字段的奇怪行为

1 个答案: