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

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

是体验我所面对的事物的提琴

这是代码

HTML

移除！
走！

JS

$（文档）.ready（函数（）
{
var friends_cnt=1；
$（'#wrapper2'）。在（'单击'，'按钮'，函数（）
{                 
clicknum=0；
如果（朋友数量<11）
{
$（''）.insertAfter（'#div'+friends_cnt）；
$（函数（）{
$（“#friend”+（friends_cnt+1））.autocomplete({
来源：功能（请求、响应）{
geocoder.geocode（{'address'：request.term}，函数（结果，状态）{
响应（$.map）（结果、功能（项）{
返回{
标签：item.u地址，
值：item.u地址，
纬度：item.geometry.location.lat（），
经度：item.geometry.location.lng（）
}
}));
})
},
});
});    
朋友们_cnt++；
}
其他的
{
}
});
$（'#按钮2'）。单击（函数（）
{                      
clicknum=0；
如果（朋友>1）
{
$（'#friend'+friends_cnt）.remove（）；
$（'#div'+friends_cnt）.remove（）；
朋友们；
}     
});
});

原因是html问题。我移动了一个

标签

关闭标签，如下所示：

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

现在指针不跳了，看：

---

你能解释一下发生了什么事吗？标签是如何导致这种情况的？@user1263375这里是我在w2schools上发现的：

元素不会呈现为用户的任何特殊元素。但是，它为鼠标用户提供了可用性改进，因为如果用户单击

元素中的文本，它将切换控件。在您的情况下，“控件”始终是第一个

输入

！

$(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--;
                            }     

                        });

});

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