title: How would I add .delegate to this external .autocomplete function?
body: <p>I just learned about .delegate today, and I know I can be used for what I want but I'm not sure how I would add it here. </p>
  
  <p>Each line when added needs to me able to use .autocomplete they all use the same data.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css"&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  $(function() {
  
  $('#field1').val("");
  $('#field2').val("");
  $('#field3').val("");
  $('#field4').val("");
  
  
  $("#field1").autocomplete({
                  source: "PRODUCT.ORDER.QUERY.php",
                  minLength: 2,
                  autoFocus: true,
                  select: function(event, ui) {
                      $('#field1').val(ui.item.field1);
                      $('#field2').val(ui.item.field2);
                      $('#field3').val(ui.item.field3);
                      $('#field4').val(ui.item.field4);
  
                  }
              });
       }); 
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;button id="removeAll"&gt;Delete All&lt;/button&gt;
  &lt;button id="addLine"&gt;New Line&lt;/button&gt;
  &lt;hr&gt;
  &lt;form action="&lt;?php echo $PHP_SELF;?&gt;" method="post" id="orderform"&gt;
  &lt;table width="90%" border="0" cellspacing="2" cellpadding="2"&gt;
    &lt;tr&gt;
      &lt;td&gt;FIELD 1&lt;/td&gt;
      &lt;td&gt;FIELD 2&lt;/td&gt;
      &lt;td&gt;FIELD 3&lt;/td&gt;
      &lt;td&gt;FIELD 4&lt;/td&gt;
      &lt;td&gt;QTY&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/table&gt; &lt;hr&gt;
  
  &lt;div id="orderForm"&gt;
  &lt;table class="orderLine" width="90%" border="0" cellspacing="0" cellpadding="0"&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input name="field1" type="text" id="field1" size="15" tabindex="1"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input name="field2" type="text" id="field2" size="15"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input name="field3" type="text" id="field3" size="15"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input name="field4" type="text" id="field4" size="15"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input name="qty"    type="text" id="qty"    size="15" tabindex="2"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;button class="removeLine"&gt;Delete&lt;/button&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  &lt;!-- START OF THE JQUERY FUNCTION THAT ADDS THE NEW ORDER LINE --&gt;
  
  &lt;script type="text/javascript"&gt;
  
  $("#orderForm").delegate(".removeLine", "click", function () {
      $(this).closest('.orderLine').remove();
  });
  
  &lt;!-- This removes all newLine table rows --&gt;
       $("#removeAll").click(function () {
        $('.orderLine').remove();
      });
  
  &lt;!-- ADDS the 'newLine' table rows --&gt;
      $("#addLine").click(function () {
  
      $('#orderForm').append('&lt;table class="orderLine" width="90%" border="0" cellspacing="0" cellpadding="0"&gt;&lt;tr&gt;&lt;td&gt;&lt;input name="field1" type="text" id="field1" size="15" tabindex="1"&gt;&lt;/td&gt;&lt;td&gt;&lt;input name="field2" type="text" id="field2" size="15"&gt;&lt;/td&gt;&lt;td&gt;&lt;input name="field3" type="text" id="field3" size="15"&gt;&lt;/td&gt;&lt;td&gt;&lt;input name="field4" type="text" id="field4" size="15"&gt;&lt;/td&gt;&lt;td&gt;&lt;input name="qty"    type="text" id="qty"    size="15" tabindex="2"&gt;&lt;/td&gt;&lt;td&gt;&lt;button class="removeLine"&gt;Delete&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;');
      });
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h2>Working 1/2 wayish. Not I can use the .autocomplete again but its not right. I populates all the fields again.</h2>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css"&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  $(function() {
  
  $('.field1').val("");
  $('.field2').val("");
  $('.field3').val("");
  $('.field4').val("");
  
  $("body").delegate(".field1:not(:ui-autocomplete)","focus",function(){
    $(this).autocomplete({
                  source: "PRODUCT.ORDER.QUERY.php",
                  minLength: 2,
                  autoFocus: true,
                  select: function(event, ui) {
                      $('.field1').val(ui.item.field1);
                      $('.field2').val(ui.item.field2);
                      $('.field3').val(ui.item.field3);
                      $('.field4').val(ui.item.field4);
  
                  }
              });
       }); 
  });
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;button id="removeAll"&gt;Delete All&lt;/button&gt;
  &lt;button id="addLine"&gt;New Line&lt;/button&gt;
  &lt;hr&gt;
  &lt;form action="&lt;?php echo $PHP_SELF;?&gt;" method="post" id="orderform"&gt;
  &lt;table width="90%" border="0" cellspacing="2" cellpadding="2"&gt;
    &lt;tr&gt;
      &lt;td&gt;FIELD 1&lt;/td&gt;
      &lt;td&gt;FIELD 2&lt;/td&gt;
      &lt;td&gt;FIELD 3&lt;/td&gt;
      &lt;td&gt;FIELD 4&lt;/td&gt;
      &lt;td&gt;QTY&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/table&gt; &lt;hr&gt;
  
  &lt;div id="orderForm"&gt;
  &lt;table class="orderLine" width="90%" border="0" cellspacing="0" cellpadding="0"&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input class="field1" type="text" size="15" tabindex="1"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input class="field2" type="text" size="15"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input class="field3" type="text" size="15"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input class="field4" type="text" size="15"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input class="qty"    type="text" size="15" tabindex="2"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;button class="removeLine"&gt;Delete&lt;/button&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  &lt;!-- START OF THE JQUERY FUNCTION THAT ADDS THE NEW ORDER LINE --&gt;
  
  &lt;script type="text/javascript"&gt;
  
  $("#orderForm").delegate(".removeLine", "click", function () {
      $(this).closest('.orderLine').remove();
  });
  
  &lt;!-- This removes all newLine table rows --&gt;
       $("#removeAll").click(function () {
        $('.orderLine').remove();
      });
  
  &lt;!-- ADDS the 'newLine' table rows --&gt;
      $("#addLine").click(function () {
  
      $('#orderForm').append('&lt;table class="orderLine" width="90%" border="0" cellspacing="0" cellpadding="0"&gt;&lt;tr&gt;&lt;td&gt;&lt;input class="field1" type="text" size="15" tabindex="1"&gt;&lt;/td&gt;&lt;td&gt;&lt;input class="field2" type="text" size="15"&gt;&lt;/td&gt;&lt;td&gt;&lt;input class="field3" type="text" size="15"&gt;&lt;/td&gt;&lt;td&gt;&lt;input class="field4" type="text" size="15"&gt;&lt;/td&gt;&lt;td&gt;&lt;input class="qty"    type="text" size="15" tabindex="2"&gt;&lt;/td&gt;&lt;td&gt;&lt;button class="removeLine"&gt;Delete&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;');
      });
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h2>WORKING EXAMPLE!</h2>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css"&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  $(function() {
  
  $('.field1').val("");
  $('.field2').val("");
  $('.field3').val("");
  $('.field4').val("");
  
  $("body").delegate(".field1:not(:ui-autocomplete)","focus",function(){
    $(this).autocomplete({
                  source: "PRODUCT.ORDER.QUERY.php",
                  minLength: 2,
                  autoFocus: true,
                  select: function(event, ui) {
                      $(this).closest('tr').find('.field1').val(ui.item.field1);
                      $(this).closest('tr').find('.field2').val(ui.item.field2);
                      $(this).closest('tr').find('.field3').val(ui.item.field3);
                      $(this).closest('tr').find('.field4').val(ui.item.field4);
  
                  }
              });
       }); 
  });
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;button id="removeAll"&gt;Delete All&lt;/button&gt;
  &lt;button id="addLine"&gt;New Line&lt;/button&gt;
  &lt;hr&gt;
  &lt;form action="&lt;?php echo $PHP_SELF;?&gt;" method="post" id="orderform"&gt;
  &lt;table width="90%" border="0" cellspacing="2" cellpadding="2"&gt;
    &lt;tr&gt;
      &lt;td&gt;FIELD 1&lt;/td&gt;
      &lt;td&gt;FIELD 2&lt;/td&gt;
      &lt;td&gt;FIELD 3&lt;/td&gt;
      &lt;td&gt;FIELD 4&lt;/td&gt;
      &lt;td&gt;QTY&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/table&gt; &lt;hr&gt;
  
  &lt;div id="orderForm"&gt;
  &lt;table class="orderLine" width="90%" border="0" cellspacing="0" cellpadding="0"&gt;
   &lt;tr&gt;
      &lt;td&gt;&lt;input class="field1" type="text" size="15" tabindex="1"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input class="field2" type="text" size="15"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input class="field3" type="text" size="15"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input class="field4" type="text" size="15"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input class="qty"    type="text" size="15" tabindex="2"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;button class="removeLine"&gt;Delete&lt;/button&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  &lt;!-- START OF THE JQUERY FUNCTION THAT ADDS THE NEW ORDER LINE --&gt;
  
  &lt;script type="text/javascript"&gt;
  
  $("#orderForm").delegate(".removeLine", "click", function () {
      $(this).closest('.orderLine').remove();
  });
  
  &lt;!-- This removes all newLine table rows --&gt;
       $("#removeAll").click(function () {
        $('.orderLine').remove();
      });
  
  &lt;!-- ADDS the 'newLine' table rows --&gt;
      $("#addLine").click(function () {
  
      $('#orderForm').append('&lt;table class="orderLine" width="90%" border="0" cellspacing="0" cellpadding="0"&gt; &lt;tr&gt;    &lt;td&gt;&lt;input class="field1" type="text" size="15" tabindex="1"&gt;&lt;/td&gt;    &lt;td&gt;&lt;input class="field2" type="text" size="15"&gt;&lt;/td&gt;    &lt;td&gt;&lt;input class="field3" type="text" size="15"&gt;&lt;/td&gt;    &lt;td&gt;&lt;input class="field4" type="text" size="15"&gt;&lt;/td&gt;    &lt;td&gt;&lt;input class="qty"    type="text" size="15" tabindex="2"&gt;&lt;/td&gt;    &lt;td&gt;&lt;button class="removeLine"&gt;Delete&lt;/button&gt;&lt;/td&gt;  &lt;/tr&gt;&lt;/table&gt;');
      });
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>