title: FocusOut event not being triggered on input box inside iframe
body: <p>I have an input box inside an iframe. I have attached <code>keypress</code>, <code>input</code> and <code>focusout</code> event listeners on the input box like this :</p>
  
  <pre><code>$("iframe").contents().find('#testDiv').on('keypress input focusout', 'input', function(event) {
    alert(event.type);
  });
  </code></pre>
  
  <p>Both <code>keypress</code> and <code>input</code> events are getting fired on the input box inside the iframe. However the <code>focusout</code> event is not getting fired on blur of the input box.</p>
  
  <p>If the input box is not placed inside an iframe, the same syntax and event binding works fine. All the three events get fired on the input box that's not inside the iframe.</p>
  
  <p><strong>NOTE :</strong> I'm using event delegation because the content in the iframe is dynamic.</p>
  
  <p><strong>HTML Markup :</strong></p>
  
  <pre><code>&lt;iframe&gt;
    &lt;body&gt;
    &lt;/body&gt;
  &lt;/iframe&gt;
  &lt;div id="testDiv1"&gt;
    &lt;input type="text" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Javascript Code :</strong></p>
  
  <pre><code>var $iframe = $("iframe");
  var iframe = $iframe[0];
  var doc = iframe.document;
  var content = '&lt;div id="testDiv"&gt;&lt;input type="text" /&gt;&lt;/div&gt;';
  if (iframe.contentDocument) {
    doc = iframe.contentDocument;
  } else if (iframe.contentWindow) {
    doc = iframe.contentWindow.document;
  }
  doc.open();
  doc.writeln(content);
  doc.close();
  
  $("iframe").contents().find('#testDiv').on('keypress input focusout', 'input', function(event) {
    alert(event.type);
  });
  
  $('#testDiv1').on('keypress input focusout', 'input', function(event) {
    alert(event.type);
  });
  </code></pre>
  
  <p>Here is a mockup of what I have tried : <a href="https://jsfiddle.net/74upc80y/" rel="nofollow">JSFiddle Demo</a></p>
  
  <p>Please help!! I cannot move out the input box from the iframe.</p>