表單元素不返回新值

我正在嘗試創建一個腳本，允許用戶單擊帶有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()後，即使在編輯後仍然顯示舊值。我覺得我錯過了一些簡單的東西，但是我一整天都在與它鬥爭，並且需要一些新的眼睛來看待它。提前致謝。

來源

2012-10-30 Tim Arview

似乎爲我工作。 http://jsfiddle.net/cwfhY/2/ –

我應該澄清，與h1裏面的div先出現。您的測試從輸入框開始。然而，當我編輯你的測試時，這並沒有改變任何東西。原來是因爲我把它放在一個表格裏面。一旦我把div放在窗體外面，它就起作用了。 –

而不是取代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'); 
}

來源

2012-10-30 02:52:55 user1600124

我曾考慮過這個問題，可能會改變生產代碼的工作方式，但我決心弄清楚爲什麼編輯不起作用。正如我在對Fabricio的評論中所說的那樣，事實證明，將它包裝成一種形式是個問題。所以，雖然你的方法更清潔，但它不會解決問題。 –

這對我的作品，並原產ES5（ECMAScript的5規格） - 無庫

（fiddle）

的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（DOC）：MDN: AddEventListener

來源

2012-10-30 04:41:40 Aeoril

表單元素不返回新值

回答

相關問題