jQuery Focusout输入无法正常工作

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

Answer 2

Try this

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

Answer 3

What is your jquery version because focusout function added in the jquery1.4 Here is ref. http://api.jquery.com/focusout/

Answer 4

I know it may be too late now but I've just had exactly the same problem and I solved it but first I will show my code and then talk about it.

    $('.price').click(function() {
      //If TD has no input (#in) element
      if(!$(this).find('#in').length) {
        //If there is any input element among children of all TD elements
        if($('#in').length) {
          //Set the input's parent's text as a value of input
          $('#in').parent().text($('#in').val());
          //Do Your AJAX using value from above
        }
        //Dynamicaly add input element
        $(this).html('<input type="number" value="'+$(this).text()+'" id="in">');
        //Set focus on input element
        $('#in').focus();
      }
    });
    $('.price').focusout(function() {
      $('#in').parent().text($('#in').val());
      //Do Your AJAX using value from above
    });

The problem is that the focusout event actualy doesn't occur. Think about it. You make new input , You click away and it seems that it should trigger the event. But it doesn't because input wasn't focused in the first place.

Another upgrade I included in my code is deleting input from other table cells that are being edited so that only one at the time can be edited (because people forget and then "boom" happens).