Javascript：動態創建的按鈕消失？

我是Javascript的新用戶。我想在用戶點擊「創建元素」按鈕時動態創建一個新按鈕。該腳本創建一個按鈕，但只有幾分之一秒。另外'value'屬性沒有爲按鈕設置。Javascript：動態創建的按鈕消失？

如果行爲背後有任何理論，請將我重定向到正確的URL。

下面是代碼：

<html> 

<head> 
    <script type="text/javascript"> 
    function doSomething(){  
     myButton = document.createElement("button");   
     myButton.setAttribute("value","New Button");   
     document.getElementById("myForm").appendChild(myButton);   
    } 
    </script> 
</head> 

<body> 
    <form id="myForm"> 
     <button name="myButton" id="myButtonID" onclick="doSomething()">Create Element</button> 
    </form> 
</body> 

</html>

來源

2012-03-16 Ash Ash

一個<button>元素是在默認情況下一個提交按鈕 - 這樣你提交表單，導致頁面重新加載。

你需要使用：

<button type="button" ...>...</button>

或者：

<input type="button" ...>

來源

2012-03-16 10:23:36 pimvdb

它的工作新的元素，謝謝。 – 2012-03-16 11:21:29

@ Ash Ash：請接受幫助的答案，謝謝:) – pimvdb 2012-03-16 11:33:14

試圖修復這個錯誤之後，發現了這個小時。我不能強調我多麼感激，我的5個小時過去了，但至少現在我可以入睡了:) +1 – VivecVelothian 2013-11-15 05:33:33

你的onclick回調函數必須返回false。

<button name="myButton" id="myButtonID" onclick="doSomething(); return false">

來源

2012-03-16 10:24:45 jantimon

我不會創建按鈕的方式。我會做這樣的事情：

myButton = document.createElement('input'); 
myButton.setAttribute("type","button");

來源

2012-03-16 10:24:52 Th0rndike

和以前一樣使用「輸入」，而不是「按鈕」已經提到。因爲「按鈕」導致頁面刷新回發。通過使用「輸入」你不會得到回傳

//創建HTML頁面

function createElement_Click() 
{ 

    // btn variable will contain a RAW html [<input></input>] object 
    var btn = document.createElement("input"); 
    //So now we can manipulate its properties: 
    btn.type = "button"; //equal to (<input type="button"></input>) in html 

    //add some value to it 
    btn.value = "Click Me"; 
    btn.id = "btnShow"; 
    btn.onclick = function() { ShowMessage(); }; 

    // step -1 put your newly created object into html 
    document.getElementById("myDiv").appendChild(btn); 


} 

function ShowMessage() { 
    alert("hello world"); 
}

來源

2016-02-02 23:31:54 Dmitry

請注意以下代碼： btn.onclick =「ShowMessage（）」; // dosen't work or btn.onclick = ShowMessage（）; //可以工作，但會在創建新元素後觸發警報（「hello world」）。我們不希望發生這種情況 – Dmitry 2016-02-03 19:08:42

Javascript：動態創建的按鈕消失？

回答

相關問題