title: Focusout is triggered twice
body: <p>I have a textbox and a Jquery UI dialog. When a user is done typing into the textbox and presses Enter, I want to display the dialog. In order to accomplish that I use the following code:</p>
  
  <pre><code>$(document).ready(function () {
      var helpDial = $('#helpDialog');
      var input = $('#helpSearch');
  
      helpDial.dialog({
          width: 800,
          autoOpen: false,
          modal: true,
          title: "Templates",
          position: [165, 158]
      });
  
      input.focusin(function () {
          helpDial.dialog('close');
      }).focusout(function () {
          helpDial.dialog('open');
      }).on('keypress', function (e) {
          var code = (e.keyCode ? e.keyCode : e.which);
          if (code == 13) {
              input.focusout();
              return false;
          }
      });
  });
  
  &lt;input id="helpSearch" /&gt;
  &lt;div id="helpDialog"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/7Fpm4/1" rel="nofollow">http://jsfiddle.net/7Fpm4/1</a></p>
  
  <p>The problem is that when I press Enter, the <code>focusout</code> is called twice, one from the <code>input.focusout()</code> and the second time right after the <code>helpDial.dialog('open')</code> in the <code>focusout</code> event handler. This causes two background overlays to be created, and when I close the dialog, one overlay remains visible.</p>
  
  <p>What am I doing wrong? Is there a better way to handle this scenario -- 'an enter pressed in a textfield opens a jQuery dialog'. Thanks.</p>