形式元素不返回新值

Question

我正在尝试创建一个脚本，该脚本允许用户使用div元素单击h1'd文本，然后用文本框和图形替换h1，以在编辑后单击。单击图形后，div将用新编辑的h1'D文本替换文本框和图形。

这是函数：

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'D文本。那部分不起作用。它仍然保留旧值。将其设置在.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');
}

Answer 2

这对我有用，是本机ES5（Ecmascript 5 Spec） - 没有库

（小提琴）

javaScript：

document.addEventListener("DOMContentLoaded", function() {
    "use strict";
    var divElem = document.getElementById("div"),
        textInputElem = document.createElement("input"),
        buttonElem = document.createElement("input");
    textInputElem.type = "text";
    buttonElem.type = "button";
    buttonElem.value = "Apply";
    function removeChildren(elem) {
        while (elem.firstChild) {
            elem.removeChild(elem.firstChild);
        }
    }
    function divClick() {
        removeChildren(divElem);
        divElem.appendChild(textInputElem, divElem.firstChild);
        divElem.appendChild(buttonElem);
        divElem.removeEventListener("click", divClick, true);
    }
    buttonElem.addEventListener("click", function() {
        var textNode;
        if (textInputElem.value !== "") {
            removeChildren(divElem);
            textNode = document.createTextNode(textInputElem.value);
            divElem.appendChild(textNode);
            divElem.addEventListener("click", divClick, true);
        }
    }, false);
    divClick();
}, false);

html：

<div id="div"></div>​

这是element。