How would I add .delegate to this external .autocomplete function?
<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>
