Why is focusout event not triggering in jQuery with focusout method ?

Question

I'm using handsontable jQuery plugin. I'm trying to intercept when a user stops editing a cell. When you double click on a cell, a text area with class handsontableInput appears on the position of that cell.

Using jQuery I tried to get the callback whenever the user clicks elsewhere, thus loosing focus of the textarea.

Here is the simple focusout code:

$(".handsontableInput").focusout(function () {
    alert("LLL");
});

Here is my fiddle.

Also, would this work if the page with the handsontable was in a frame, and I clicked outside the frame?

Thank you

Answer 1

You should use the .on method:

$("#exampleGrid").on('focusout','.handsontableInput',function () {
    alert("LLL");
});

JSFIDDLE: http://jsfiddle.net/edi9999/HEH5C/1/

The issue with your code was that at the moment of the execution of $(".handsontableInput"), they was no element with this class, so the event was attached to no element.

Answer 2

Delegate event like this:

$("#exampleGrid").on('focusout',".handsontableInput",function () {
    console.log("LLL");
});

Answer 3

You need to use event delegation as .handsontableInput is being generated dynamically

$(document.body).on('focusout',".handsontableInput",function () {
    console.log("LLL");
});

Demo ---> http://jsfiddle.net/HEH5C/2/

Answer 4

There is already a handsontable event that does this. You could use its own event:

afterChange (changes: Array, source: String)

Although the main description of this event is "Callback fired after one or more cells is changed" it is called even when there is no change, just with the oldValue and newValue of the changes array being the same. Therefore, this event is called when editing ends and loosing focus, which is what you wanted.

For more detail on the handsontable events, look here