title: How do you bind jQuery UI autocomplete using .on()?
body: <p>This question was answered for the live() method, but the live() method has been deprecated as of jQuery 1.7 and replaced with the .on() method and this answer does not work for on().</p>
  
  <p>Here's where it was answered before:
  <a href="https://stackoverflow.com/questions/4551230/bind-jquery-ui-autocomplete-using-live">Bind jQuery UI autocomplete using .live()</a></p>
  
  <p>Anyone know how to do the <em>same thing</em> with on()? </p>
  
  <p>If you change the syntax to something like </p>
  
  <pre><code>$(document).on("keydown.autocomplete",[selector],function(){...});
  </code></pre>
  
  <p>from </p>
  
  <pre><code>$([selector]).live("keydown.autocomplete",function(){...});
  </code></pre>
  
  <p>It kind of works, but it interacts with the internal autocomplete events in a weird way. With live(), if you use the <em>select</em> event and access the event.target, it gives you the id of the input element. If you use on(), it gives you the id of the dropdown menu "ui-active-menuitem". Something like this:</p>
  
  <pre><code>$( ".selector" ).autocomplete({
     select: function(event, ui) { 
       console.log(event.target.id);
   }
  });
  </code></pre>
  
  <p>But - if you use the "open" event, it will give you the id I'm looking for - just not at the right time (I need it after it is selected). At this point, I'm using a workaround of grabbing the ID of the input element in the open event function, storing it in a hidden field, then accessing it in the select method where I need it.</p>