title: How can I add jquery ui autocomplete to a dynamically created element?
body: <p>I'm trying to get jQueryUI AutoComplete to trigger on dynamically created form input elements, but it's not working. I've tried using keyup.autocomplete and keydown.autocomplete as bind events in $.live(), but it's binding to the new elements - only those already on the page.</p>
  
  <p>Try out the code <a href="http://jsfiddle.net/6t74T/1/" rel="noreferrer">here</a> (try typing "ava" in the first input, then click "Add an Input" and type the same in the new input).</p>
  
  <p>JavaScript:</p>
  
  <pre><code>$(function() {
      $("input#addButton").click(function() {
          $("input.searchInput:last").clone(true).appendTo($(this).closest("form"));
          $("input.searchInput:last").val("");
  
      })
  
      $("input.searchInput").live("keydown.autocomplete", function() {
          $(this).autocomplete({
              source: [
                  "ActionScript",
                  "AppleScript",
                  "Asp",
                  "BASIC",
                  "C",
                  "C++",
                  "Clojure",
                  "COBOL",
                  "ColdFusion",
                  "Erlang",
                  "Fortran",
                  "Groovy",
                  "Haskell",
                  "Java",
                  "JavaScript",
                  "Lisp",
                  "Perl",
                  "PHP",
                  "Python",
                  "Ruby",
                  "Scala",
                  "Scheme"
                  ],
  
              minLength: 2
          });
      })
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;form name="myForm" method="post"&gt;
      &lt;input id="addButton" name="addButton" type="button" value="Add an input" /&gt;
      &lt;input name="search" value="" class="searchInput" maxlength="20" /&gt;
  &lt;/form&gt;
  </code></pre>