CODEWITHSUNDEEP
javascriptjqueryhtmldom
user1263375
user1263375

Reputation: 663

Weird behavior by the dynamically created input fields

i am trying to create input text fields dynamically. Using jquery i am able to generate input fields, but whenever the user tries to click on any of the dynamically created fields, his pointer automatically moves to the first field. Now By using TAB key only he is able to navigate to a particular field and enter details.

Here is the fiddle to experience what i am facing.

And here is the code

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

                        });

});

Upvotes: 1

Views: 94

Answers (1)

Ivan Chernykh
Ivan Chernykh

Reputation: 42166

The reason is html issue. I have moved a label close tag like this:

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

and now the pointer is not jumping , look:

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

Upvotes: 2

Related Questions