jQuery not behaving as expected in reference to clicks
<p>I have an element that I grab the content of and swap for an input, I then want to user to be able to click on the input (to enter text as normal), but if they click anywhere else to swap it back to the text.</p>

<p>However the click event seems to fire even the very first time the user clicks anywhere on the page. My code is below, have I misunderstood something?</p>

<pre><code>$(document).ready(function(){ 
   $("#thingy").css('cursor', 'pointer');
   $("#thingy").one("click", function() { 
     var element = $(this);
     element.css('cursor', 'auto');
     element.css('display', 'inline-block');
     element.fadeOut(100, function(){element.html('&lt;input type="text" size="25" value="' + element.text() + '" style="width:' + element.width() + 'px;height:' + element.height() + 'px;border:none;padding:0px;margin:0px;"&gt;')}).fadeIn(100);
     $("#thingy").click(function() {
       return false;
     });    
     $(document).click(function() {
         alert("You clicked off the text-box");
         element.html(element.children('input:text').val());
     });
  }); 
}); 
</code></pre>
