Fire an event on specific html element

I'm creating input html element with jQuery with following event handlers like so:

$("<input type=\"text\" />").
   focus(function()
   {
      //do something on focus
   })
   .blur(function()
   {
      //do something on blur
   });

If I have two such inputs 开发者_如何学Goon one page and I have focus on one and then I click to focus on another, only focus handler executes but not blur. You can try this here. What needs to happen is focus handler on one input gets executed and blur on another.

What happens, is the blur is called, but immediately after, the focus of the other event is called, overwriting the "blur" message.