单击更改为文本区域时，单击外部时更改回

Question

我正在尝试制作一个类似于 PHPadmin 的函数，它们在显示表格时使用什么，当单击 div 字段时，更改为文本区域，当单击 div 外部时，将其更改回 div 字段。下面的代码是错误的，当我点击外部时，我无法更改回 div 文件。请帮助我改进代码。

JS：

$('#editor #gird_edit').bind({
  click: function() {
            $(this).html('<textarea id="gird_edit">'+$(this).text()+'</textarea>');
  },
  blur: function() {
            $(this).html('<div id="gird_edit">'+$(this).text()+'</div>');
  }
});

HTML：

<div id='editor'>
<div id='gird_edit'>hallo world</div>
<div id='gird_edit'>hallo world 2</div>
<div id='gird_edit'>hallo world 3</div>
</div>

我只有 8 个声望，我不能投票给你。但是，我真诚地感谢您的帮助！

Answer 1

检查this我刚刚制作的jsbin，如果您需要其他任何东西，我很乐意提供帮助。

Answer 2

see jsfiddle

updated jsfiddle

当$(this).html(textarea) 完成时，div 已经模糊了。所以 onBlur 不起作用

$('#editor #gird_edit').bind({
    click: function() {
        var tex = $(this).text();
        var textarea = $('<textarea id="gird_edit">'+tex+'</textarea>');
        $(this).html(textarea);
        textarea.focus();
        textarea.blur(function(){
            var currentText = textarea.val();
            if(currentText == tex)//not change
                textarea.parent().text(tex);
            else //changed
                alert(currentText);
        });
    }
});

---

编辑 3：

else{
    textarea.parent().text(currentText);
    //something else
}

查找更多jquery API

Answer 3

当你第一次点击#gird_edit它是一个div，所以this是一个div，你可以替换它的内容来改变东西。但是，当您模糊 #gird_edit 时，#gird_edit 是一个 textarea，因此如果您更改其内容，您并没有真正改变您想要更改的内容（您只是更改了 textarea 的内部）。

您要更改的是文本区域周围的 div，即。该文本区域的“父级”。换句话说，试试：

blur: function() {
        $(this).parent().html('<div id="gird_edit">'+$(this).text()+'</div>');
}