title: jQuery append elements not working with autocomplete
body: <p>jQuery newbie here, I have a table with 2 rows in, the input elements in these rows are set to autocomplete, this works perfectly.</p>
  
  <p>I have an 'add line' button that when clicked, jQuery appends a new line onto the table, this also works perfectly but the problem is that the autocomplete does not work on the appended elements, they are the same as the elements above that work perfectly. Am I missing something here? is there a way to get around whatever the problem is here?</p>
  
  <p>The code is below.</p>
  
  <p>jQuery </p>
  
  <pre><code>&lt;script&gt;
  $(function() {
  
      $( ".id" ).autocomplete(
      {
           source: "autocomp.php?part=id"
      })
  
  });
  
  $(function() {
  
      $( ".internal" ).autocomplete(
      {
           source: "autocomp.php?part=internal"
      })
  
  });
  
  $(function() {
  
      $( ".title" ).autocomplete(
      {
           source: "autocomp.php?part=title"
      })
  
  });
  
  $(document).ready(function() {
  $('a').click(function() {
     $('table').append('&lt;tr&gt;&lt;td&gt;&lt;input name="id" class="id" type="text" /&gt;&lt;/td&gt;&lt;td&gt;&lt;input name="quantity" class="quantity" type="text" /&gt;&lt;/td&gt;&lt;td&gt;&lt;input name="internal" class="internal" type="text" /&gt;&lt;/td&gt;&lt;td&gt;&lt;input name="title" class="title" type="text" /&gt;&lt;/td&gt;&lt;td&gt;&amp;pound;&lt;/td&gt;&lt;td&gt;&amp;pound;&lt;/td&gt;&lt;/tr&gt;');
  });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>and the HTML </p>
  
  <pre><code>&lt;table class="products" id="table" border="1" bordercolor="#000000" style="background-color:#FFFFFF; margin-left:5%; margin-top:40px;" width="90%" cellpadding="3" cellspacing="3"&gt;
  
      &lt;tr&gt;
          &lt;td&gt;&lt;b&gt;ID&lt;/b&gt;&lt;/td&gt;
          &lt;td&gt;&lt;b&gt;Quantity&lt;/b&gt;&lt;/td&gt;
          &lt;td&gt;&lt;b&gt;Internal Name&lt;/b&gt;&lt;/td&gt;
          &lt;td&gt;&lt;b&gt;Title&lt;/b&gt;&lt;/td&gt;
          &lt;td&gt;&lt;b&gt;Unit Price&lt;/b&gt;&lt;/td&gt;
          &lt;td&gt;&lt;b&gt;Total&lt;/b&gt;&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
          &lt;td&gt;&lt;input name="id" class="id" type="text" /&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input name="quantity" class="quantity" type="text" /&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input name="internal" class="internal" type="text" /&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input name="title" class="title" type="text" /&gt;&lt;/td&gt;
          &lt;td&gt;&amp;pound;&lt;/td&gt;
          &lt;td&gt;&amp;pound;&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
          &lt;td&gt;&lt;input name="id" class="id" type="text" /&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input name="quantity" class="quantity" type="text" /&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input name="internal" class="internal" type="text" /&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input name="title" class="title" type="text" /&gt;&lt;/td&gt;
          &lt;td&gt;&amp;pound;&lt;/td&gt;
          &lt;td&gt;&amp;pound;&lt;/td&gt;
      &lt;/tr&gt;
              &lt;/table&gt;
  
              &lt;a href="javascript:void(0);"&gt;Add Line&lt;/a&gt;
  </code></pre>
  
  <p>Many thanks in advance for your help.</p>