JQuery focusout not starting when exiting input element

Question

I would like to trigger a focus event no matter where I click on the document. However, I use a sorted list in which each sortable element contains a text field, the focus event does not fire when clicking on the sortable elements. The same thing happens with draggable items. I created jsfiddle to demonstrate this problem:

Click on the text box and try to click anywhere in the blue rectangle: Tested in Google Chrome http://jsfiddle.net/RWJhs/

Are there any known workarounds?

JavaScript:

$("textarea").focusout(function(){ alert("Do something"); }); $("#draggable").draggable(); 

HTML:

 <div id="draggable"> <textarea></textarea> </div> 

Answer 1

You can try this

 $("textarea").focusout(function(){ alert("Do something"); }).click(function(e){ e.stopPropagation(); return true; }); $("#draggable").draggable({ start: function( event, ui ) { if( $('textarea:focus', this).length ){ $('textarea', this).focusout(); } } }).click(function(e){ if( $('textarea:focus', this).length ){ $('textarea', this).focusout(); } }); 

Demo.

Answer 2

This works for me: http://jsfiddle.net/RWJhs/1/

 $("textarea").focusout(function(){ alert("Do something"); }); $('#draggable not(textarea)').on('click'); $("#draggable").draggable(); 

Edit: Manually triggering a blur event seems to make it work without disabling draggin see here: http://jsfiddle.net/RWJhs/6/

 $("#draggable").on('click', function(e){ if (e.target == this && $('textarea').is(':focus')) $('textarea').blur(); }); $("textarea").blur(function(){ alert("Do something"); }); $("#draggable").draggable();