JQuery: How do I know when a table row loses focus?

Question

The table row ( <tr> ) has several input elements.

I need to execute JavaScript code when tr loses focus (but not when the user simply switches to another input element in the same tr).

I am using jQuery.

How to do this cross browser?

Answer 1

I assume you are looking for such an approach ( demo noted in Chr / Ff / IE10):

 var delayedFn, blurredFrom; $('tr').on('blur', 'input', function(event) { blurredFrom = event.delegateTarget; delayedFn = setTimeout(function() { console.log('Blurred'); }, 0); }); $('tr').on('focus', 'input', function(event) { if (blurredFrom === event.delegateTarget) { clearTimeout(delayedFn); } }); 

As you can see, we delay the call to our "true blur handler" (which is a function with console.log in this example) using setTimeout - and clear this timeout if we see that the focus remains on the same line.

I use delegation here, so I don't need to call closest(tr) every time. But there is another side effect, since the handler will correctly deal with the inputs dynamically added to the table.