Javascript Won't Work On Duplicated Row

Question

I have a table row with a form field element in it that when I press a plus icon it duplicates. On the same row the form field element is a autocomplete field that is controlled by javascript. The autocomplete works on the initial row but it doesn't work on the new row once I press the plus icon. I tried changing #nameSearch to .nameSearch and ID to class on the form element respectively but that hasn't worked. How would I get the javascript working on the new row?

HTML FORM ELEMENT

<tr><td>
<input type='search' id='nameSearch' name='vote[]' placeholder='Search User'/>
<a href="#" id="addRow">+</a>
</td></tr>

JAVASCRIPT FOR AUTOCOMPLETE

<script>
$(document).ready(function(){

$('#nameSearch').autocomplete({

source:'results.php', 
minLength:1,
select: function(event, ui){

  // just in case you want to see the ID
  var accountVal = ui.item.value;
  console.log(accountVal);

  // now set the label in the textbox
  var accountText = ui.item.label;
  $('#nameSearch').val(accountText);

  // now set the label in the textbox
  var accountText = ui.item.value;
  $('#nameSearchID').val(accountText);

  return false;
},
focus: function( event, ui ) {
  // this is to prevent showing an ID in the textbox instead of name 
  // when the user tries to select using the up/down arrow of his keyboard
  $( "#nameSearch" ).val( ui.item.label );
  return false;  
},  

});

});
</script>

JAVASCRIPT FOR NEW ROW

$(window).load(function(){
$(function() {
    var scntDiv = $('#p_row');
    var i = $('#p_row tr').size() + 1;

    $('#addRow').live('click', function() {
            $('<tr><td><input type='search' id='nameSearch' name='vote[]' placeholder='Search User'/><a href="#" id="remRow">-</a></td></tr>').appendTo(scntDiv);
            i++;
            return false;
    });

    $('#remRow').live('click', function() { 
            if( i > 1 ) {
                    $(this).parents('tr').remove();
                    i--;
            }
            return false;
    });
});

});

So the issue lies with getting the second row of the generated table to get autocomplete working.

Any help would be appreciated.

I am not too familiar with everything you are doing but you are definitely not referencing the second line properly. Usually one will need to use `this` in this situation along with a `find` to help find that current rows element that you are trying to change. I am sure someone else will be able to assist you though. If you have this working as it stands in a jsfiddle, I would be happy to help — Kenneth Salomon, Aug 04 '15 at 18:57
http://stackoverflow.com/questions/2663573/jquery-autocomplete-for-dynamically-created-inputs — Steve, Aug 04 '15 at 18:58
First off, .live is VERY depricated. Use .on as documented here https://api.jquery.com/on/ As far as the autocomplete, it is not running because it is not bound to the new row. You could call the autocomplete bind function on the new row, that should fix it. — nurdyguy, Aug 04 '15 at 18:58
First, you cannot replicate IDs, don't do it. You will need to dynamically assign a new ID. Second once you build this new item you will need to rerun the autocomplete function on it. This is because the new item does not have the bindings required. So you can just append the autocomplete at the end of the append. — TheHamstring, Aug 04 '15 at 19:31

Javascript Won't Work On Duplicated Row

0 Answers0