title: How to fire a keypress event on a dynamically created element
body: <p>I have a firstName and a lastName input that I am hiding and replacing with a single fullName input box. I am then using JqueryUI autocomplete on the dynamically created input and it works fine. When I try to write unit tests for this and dynamically add some input and fire the 'keydown' event, the box with the autocomplete results does not show up (I want to assert that I'm getting the desired results in my tests). 
  If I type "s" in the input manually, the results show up just fine. 
  I have a <a href="https://jsfiddle.net/o8j3fgxL/5/" rel="nofollow noreferrer">JSFiddle</a> that shows my problem.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;input id="firstName"&gt;
  &lt;input id="lastName"&gt;
  </code></pre>
  
  <p>JQuery:</p>
  
  <pre><code>// add the single input
  $('#firstName').before('&lt;input id="fullName"&gt;');
  // remove the original first and last name fields
  $('#firstName, #lastName').hide();
  // call autocomplete on the dynamically created input
  $("#fullName").autocomplete({
    source: ["ActionScript", "AppleScript", "ASP", "Basic", "ColdFusion", "Haskell", "JavsScript", "Lisp", "Scala", "Scheme"]
  });
  
  // ** start unit test **
  
  // auto populate the dynamic input
  $('#fullName').val('sc');
  // force a keypress to show the autocomplete options
  $('#fullName').trigger('keypress');
  </code></pre>