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

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

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

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

Answer 3

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

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

3 个答案: