title: bind event to iframe's content and trigger it from iframe
body: <p>I have isolated very strange bug from our current project:</p>
  
  <p><a href="http://pastehtml.com/view/1dkw0k4.html" rel="nofollow">index.html</a> (demo) and <a href="http://pastehtml.com/view/1dkw073.html" rel="nofollow">iframe.html</a></p>
  
  <p>do:</p>
  
  <p>1) click at the first input and select any date</p>
  
  <p>you will see - <strong>"datepicker changed inside iframe!"</strong></p>
  
  <p>2) click at the second input, write some symbols and press at any free space at the page</p>
  
  <p>you will see - <strong>"usual_input changed inside iframe!" + "usual_input changed outside iframe!"</strong></p>
  
  <p>inside iframe:</p>
  
  <pre><code>&lt;input id="datepicker" /&gt; &lt;input id="usual_input" /&gt;
  </code></pre>
  
  <p>binded at index.html to the change event at this inputs:</p>
  
  <pre><code>$(this).contents().find("#datepicker").change(... (1)
  $(this).contents().find("#usual_input").change(... (2)
  </code></pre>
  
  <p>binded at iframe.html to the change event at this inputs:</p>
  
  <pre><code>$("#datepicker").change(... (3)
  $("#usual_input").change(... (4)
  </code></pre>
  
  <p>But <strong>№1</strong> dont work in any browser!</p>
  
  <p>jquery ui's datepicker <strong>trigger change event 100% correctly</strong>. why we cant bind to it <strong>outside</strong> an iframe?</p>