How do you trigger a blur/focusout event on an input text box using jquery?

Question

I'm using 1.7.2 in which I understand this should work:

// cell is a jquery representation of a <td> element
cell.append($("<input/>", { "type": "text" }).val(content));        
cell.children()[0].focus();
cell.children()[0].on("blur", function() {
    alert("blur");
}

The input box is appended, grabs focus and then the javascript console tells me:

Uncaught TypeError: Object #<HTMLInputElement> has no method 'on'

I'd be grateful if anyone knows how I can catch the blur/focusout event.

Answer 1

You are accessing the DOM element with [0] and acting like it is a jQuery object.

If you only want the first, you need to use eq() to get the jQuery object.

cell.children().eq(0).focus().on("blur", function() {
    alert("blur");
};