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

【问题标题】：Weird behavior by the dynamically created input fields动态创建的输入字段的奇怪行为
【发布时间】：2013-06-30 07:37:56
【问题描述】：

我正在尝试动态创建输入文本字段。使用 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>

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

                        });

});

【问题讨论】：

标签： javascript jquery html dom

【解决方案1】：

原因是 html 问题。我已经像这样移动了一个label 关闭标签：

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

现在指针没有跳跃，看：

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

【讨论】：

你能解释一下发生了什么吗？标签是如何导致这种情况的？
@user1263375 这是我在 w2schools 上发现的：<label> 元素不会为用户呈现任何特殊的东西。但是，它为鼠标用户提供了可用性改进，因为如果用户单击 <label> 元素中的文本，它会切换控件。在您的情况下，“控件”始终是第一个 input！