表單元素未返回新值

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文本。 那部分不起作用。 它仍然保留了舊的價值。 將“ s”設置為.val()后，我發出了警報，即使在編輯后，它仍顯示舊值。 我覺得自己缺少一些簡單的東西，但是我整天都在努力工作，需要一些新鮮的眼睛為我看。 提前致謝。

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.AddEventListener（）上的MDN文檔： MDN：AddEventListener