title: Input field immediately blurs after focus
body: <p>According to <a href="https://stackoverflow.com/a/9410355/1494454">this answer</a> I try to create a page where if the input field get focused than the height is scaled down small enough that the page will be not scrollable. If the input field lose the focus than everything is made back to the original state.</p>
  
  <p>I tried this technique without events only entering the code through the console and it worked like a charm, but after I bind these to events, everything is ruined. I realized that after I click into the input field and the binded function executes, the input field immediately lose the focus. It logs the <code>bind</code> to the console, but doesn't <code>unwrap()</code> and also doesn't change the <code>scrollLocked</code>'s value, so in the next click it <code>wrap()</code> the <code>&lt;div&gt;</code> again and there will be multiple ones.</p>
  
  <p>My guess for this behavior is that after the focus the DOM isn't created yet but it immediately blurs and it is executed so fast that it try to <code>unwrap()</code> a DOM element that isn't exist yet. The only pitfall in this theory is that after the second or umpteen click there are a lot of <code>height-helper</code>s but it still doesn't <code>unwrap()</code> any of them.</p>
  
  <h1><a href="http://jsfiddle.net/XGRhZ/" rel="nofollow noreferrer">Live Demo</a></h1>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;input type="text" id="search-text"&gt;
  &lt;div id="spacer" style="height:1500px;"&gt;&lt;/div&gt;
  </code></pre>
  
  <h2>JavaScript/jQuery</h2>
  
  <pre><code>var scrollLocked = false;
  
  $(document).on('focus', '#search-text', function(){
      if (!scrollLocked){
          scrollLocked = true;
          $('body').wrapInner(
              $('&lt;div id="height-helper"/&gt;').css({
                  height: 300,
                  overflow: 'hidden'
              })
          );
      }
  });
  
  $(document).on('blur', '#search-text', function(){
      console.log('blur');
      $('#height-helper').contents().unwrap();
      scrollLocked = false;
  });
  </code></pre>
  
  <p>Why does the input field lose the focus immediately and why the blur's function do not <code>unwrap()</code> even after multiple clicks? Is there a way to achieve what I described?</p>