MarkHowes MarkHowes - 1 month ago 24
jQuery Question

jQuery Focusout of input not working

I'm trying to create in-line editing of data in a table, to do this I am changing the text in the cell into an input.

$(document).ready(function(){
$('td.edit').on("click",function(){
$(this).html("<input type=\"text\" value=\"" + $.trim($(this).text()) + "\" />");
$(this).off();
});
});


This works fine.

Then I'm wanting to write the data away with ajax when I click away, however I can't seem to get the focusout working...

I've tried the following, all inside the $(document).ready, all without success:

$('td.edit').on("focusout","input",function(){
alert("bye");
});

$('td.edit input').on("focusout",function(){
alert("bye");
});

$('td.edit input').focusout(function(){
alert("bye");
});

$('td.edit').on("focusout",function(){
alert("bye");
});

$('td.edit').focusout(function(){
alert("bye");
});

Answer

Try this,

$('td.edit').on("blur","input",function(){
    alert("finally bye");
});

If parent td.edit not works then use document as parent selector like

$(document).on("focusout","td.edit input",function(){
    alert("finally bye");
});

Fiddle