17

我正在尝试在表格中创建数据的内联编辑，为此我将单元格中的文本更改为输入。

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

这工作正常。

然后我想在点击离开时用ajax写数据，但是我似乎无法让焦点输出工作......

我在 $(document).ready 中尝试了以下所有操作，但均未成功：

    $('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");
    });
4

4 回答 4

24

尝试这个，

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

如果parent td.edit不起作用，则document像parent selector这样使用

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

小提琴

于 2013-10-09T07:22:51.023 回答
4

尝试这个

 $('td.edit').on("blur",function(){
    alert("bye");
});
于 2013-10-09T07:21:50.533 回答
2

你的 jquery 版本是什么，因为 jquery1.4 中添加了 focusout 功能 这里是 ref。http://api.jquery.com/focusout/

于 2014-06-11T07:33:45.003 回答
0

我知道现在可能为时已晚，但我刚刚遇到了完全相同的问题并且我解决了它，但首先我将展示我的代码，然后再讨论它。

    $('.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
    });

问题是focusout事件实际上没有发生。想想看。你做新input的，你点击离开，它似乎应该触发事件。但这并不是因为input一开始就没有专注。

我在代码中包含的另一个升级是从正在编辑的其他表格单元格中删除输入，以便当时只能编辑一个（因为人们忘记了然后“繁荣”发生了）。

于 2016-10-12T08:16:46.787 回答