javascript - 表单元素不返回新值

Question

我正在尝试创建一个脚本，允许用户单击带有 h1 文本位的 div 元素，然后替换 h1 带有一个文本框和一个编辑后点击的图形。单击图形后，div 将用新编辑的 h1 文本位替换文本框和图形。

函数如下:

function savename() {
    var s = $('#mytextbox').val();
    $('#mydiv').replaceWith('<div id="mydiv" onclick="editname();"><h1>' + s + '</h1></div>');
}
function editname() {
    var strName = $('#mydiv').text();
    $('#mydiv').replaceWith($('<div id="mydiv"><input id="mytextbox" name="mytextbox" type="text" value="' + strName + '"><img id="mysavebutton" src="images/save.gif" onclick="savename();"></div>'));
}

这是div:

<div id="mydiv" onclick="editname();"><h1>Some text I want to edit</h1></div>

因此，div 点击功能工作正常。它将 h1 元素替换为文本框。当我单击保存图形时，效果也很好，因为它返回了 h1。问题是，文本框的值应该是 h1 的文本。那部分不工作。它仍然保留旧值。在将它设置为 .val() 之后，我对“s”发出了警报，它仍然显示旧值，即使在编辑之后也是如此。我觉得我错过了一些简单的东西，但我整天都在与它作斗争，需要一些新鲜的眼光来为我审视它。提前致谢。

Answer 1

与其替换 mydiv 并尝试重新创建 mydiv，不如在单击时隐藏 mydiv 并在尝试保存时更改 h1 标签的值？

在 html 中你可以有这样的东西:

<div id="mydiv">
    <h1 id="myoutput" onclick="editname();"> ... </h1>
    <input id="mytextbox" name="mytextbox" type="text" style="display:none;">
    <img id="mysavebutton" src="images/save.gif" onclick="savename();" style="display:none" /> 
</div>

然后在 javascript 中:

function editname()
{
    var s = $('#myoutput').text();
    $('#myoutput').css('display', 'none');
    $('#mytextbox').val(s).css('display','inline');
    $('#mysavebutton').css('display', 'inline');
}
function savename()
{
    var s = $('#mytextbox').val();
    $('#myoutput').text(s).css('display', 'inline');
    $('#mytextbox').css('display', 'none');
    $('#mysavebutton').css('display', 'none');
}