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