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

我正在尝试创建一个像PHPadmin这样的函数，当他们显示表格时，他们正在使用它们，当点击div字段时，更改为文本区域，当点击div之外时，将其更改回div字段。 下面的代码是错误的，当我点击外面时，我无法更改回div文件。 请帮我改进代码。

JS：

$('#editor #gird_edit').bind({ click: function() { $(this).html(''+$(this).text()+''); }, blur: function() { $(this).html('
'+$(this).text()+'
'); } }); 

HTML：

 
 
hallo world
 
hallo world 2
 
hallo world 3
  

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

Answer 1

看到j​​sfiddle

更新了jsfiddle

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

 $('#editor #gird_edit').bind({ click: function() { var tex = $(this).text(); var textarea = $(''+tex+''); $(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 2

检查我刚刚制作的这个 jsbin，如果你需要别的什么我很乐意提供帮助。

Answer 3

当你第一次点击#gird_edit它是一个div，所以this是一个div，你可以替换它的内容来改变一些东西。 但是，当你模糊掉#gird_edit是一个textarea时，所以如果你改变它的内容你就不会真正改变你想要改变的东西（你只是改变你的textarea的内部）。

你想要改变的是在textarea周围的div，即。 该textarea的“父母”。 换句话说，尝试：

 blur: function() { $(this).parent().html('
'+$(this).text()+'
'); }