I am using JQuery to create additional input fields via clicking a link. Currently, I have an autocomplete plugin implemented that works fine for the fields that were created on page load. When the user adds new fields the autocomplete does not work for those specific fields. I was just wondering if someone could help me figure out how to get it to work.
<script type='text/javascript'> $(document).ready(function() { $('#addingredient').click(function() { $('<li />').append('<input type='text' class='ingredient' name='ingredient[]' id='ingredient[]' size='60' />') .append('<input type='text' class='amount' name='amount[]' id='amount[]' size='5' />') .append('<select class='unit' name='unit[]' id='unit[]'><?=$units ?></select>') .appendTo('#ingredients') .hide() .fadeIn('normal'); }); </script> <script> $(document).ready(function(){ var data = 'http://mywebsite.com/ingredients.php'; $('.ingredient').autocomplete(data); }); </script> <ul id='ingredients'> <li><input type='text' class='ingredient' name='ingredient[]' id='ingredient[]' size='60' /><input type='text' class='amount' name='amount[]' id='amount[]' size='5' /><select class='unit' name='unit[]' id='unit[]'><?=$units ?></select></li> <li><input type='text' class='ingredient' name='ingredient[]' id='ingredient[]' size='60' /><input type='text' class='amount' name='amount[]' id='amount[]' size='5' /><select class='unit' name='unit[]' id='unit[]'><?=$units ?></select></li> <li><input type='text' class='ingredient' name='ingredient[]' id='ingredient[]' size='60' /><input type='text' class='amount' name='amount[]' id='amount[]' size='5' /><select class='unit' name='unit[]' id='unit[]'><?=$units ?></select></li> </ul>
You need to rerun the autocomplete on the new element, after it has been added to the DOM. The following will wait until the element has been faded in, then sets up the autocomplete on the new element with the correct class.