克隆的div在appendChild後消失

我試圖添加一個複製函數來克隆和附加一個div。這裏的JS：克隆的div在appendChild後消失

function NL(){ 
    var original = document.getElementsByClassName('form-block')[0]; 
    var clone=original.cloneNode(true); 
    document.getElementsByTagName('form')[0].appendChild(clone); 
} 

document.getElementsByClassName('new-line')[0].addEventListener('click',NL);

和HTML：

<form class='myform'> 
    <div class='form-block'> 
    <span class='line'>1</span> 
    <button class='new-line'>New Line</button> 
    <button class='new-nested'>New Nested Line</button> 
    <input class='input' type='text' placeholder='Enter Value...'> 
    <button class='new-input'>Add input</button> 
    </div> 
</form>

CodePen Link

的想法是，當你點擊「新線」按鈕，一個新的 '形塊' 進行了克隆，附在第一個之下。但是，如果你現在點擊「新行」按鈕，新塊會短暫顯示，然後消失。我無法弄清楚爲什麼。

我無法修改HTML中的任何內容，我只能使用vanilla JS。

謝謝！

來源

2017-03-25 Bismo Funyuns

我認爲（我不知道），每次點擊該按鈕時，'表單'被提交併因此重新加載頁面。是的，我是對的。 http://stackoverflow.com/questions/4667979/whats-the-standard-behavior-when-button-tag-click-will-it-submit-the-form –

button默認類型是submit。在沒有指定類型的情況下，它會作爲提交按鈕&在您嘗試進行郵寄呼叫的情況下。您可以打開開發人員控制檯並檢查網絡選項卡。爲了防止使用 preventDefault()

function NL(event){ 
event.preventDefault() // Here is the change 
    var original = document.getElementsByClassName('form-block')[0]; 
    var clone=original.cloneNode(true); 
    document.getElementsByTagName('form')[0].appendChild(clone); 
} 

document.getElementsByClassName('new-line')[0].addEventListener('click',NL);

DEMO

來源

2017-03-25 03:06:21 brk

啊，這個工程。非常感謝你！！！！！ –

只需使用類型= 「按鈕」

<button type="button" class='new-line'>New Line</button> 
<button type="button" class='new-nested'>New Nested Line</button>

來源

2017-03-25 03:06:46 Dherya

我不允許編輯HTML文件。我只能寫JS。 :( –

然後你必須在你的函數中使用 event.preventDefault（） @brk – Dherya

我剛剛嘗試過使用@ brk的解決方案，它做了我所需要的，謝謝。 –

克隆的div在appendChild後消失

回答

相關問題