jQuery Focusout of input not working

Question

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 1

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