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 should bind delegate event ie. live event to those inputs, because they appended to DOM later, so they need live event handler.

$(cell).on('blur focusout', ':text', function() {
   alert(this.value);
});

then trigger like following:

$(':input:first', cell).blur(); // or $(':text', cell).trigger('blur');

$(':input:first', cell).focusout(); // or $(':text', cell).trigger('focusout');.

according to your code

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

or

cell.children(':input:first').focus().on("blur", function() {
    alert("blur");
};

Answer 2

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");
};

Answer 3

You are calling .on on a DOM element, not jQuery object, try this:

var input = $("<input/>", { "type": "text", val: content } );
cell.append(input);
input.focus();
input.on( "blur", function(){
    alert( "blur" );
});