有沒有辦法動態創建嵌套的div onclick？

我試圖創建一個頁面，用戶可以通過添加額外的div或嵌套的div（儘可能深的層數）來自定義表單以滿足他們的需求。在每個div中，我想要有文本輸入和一個按鈕，在同一級別添加另一個div，並在其中嵌入一個div。兩個div都應該有一個文本輸入和一個按鈕來完成同樣的事情。有沒有辦法動態創建嵌套的div onclick？

但是我有點卡住了。當我嘗試創建一個嵌套的div時，我總是最終將其添加到最底層而不是其父層。

<html> 
    <script type="text/javascript"> 
     var counter = 1; 
     function addNode() { 
      var newDiv = document.createElement('div'); 
      counter++; 
      newDiv.innerHTML = "Entry " + counter + " <br><input type='text' name='myInputs'>"; 
      document.getElementById("dynamicInput").appendChild(newDiv); 
      var newButton = document.createElement('button'); 
      newButton.type = "button"; 
      newButton.onclick = addSub; 

      document.getElementById("dynamicInput").appendChild(newButton); 
     } 
     function addSub() { 
      var newDiv = document.createElement('div'); 
      counter++; 
      newDiv.innerHTML = "Entry " + counter + " <br><input type='text' name='myInputs' style='margin:10px'>"; 
      document.getElementById("subInput").appendChild(newDiv); 
     } 
    </script> 
    <form class="form" method="POST"> 
     <div id="dynamicInput" name="dynamicInput" multiple="multiple"> 
      Entry 1<br><input type="text" name="myInputs"> 
      <div id="subInput" name="subInput" multiple="multiple"> 
       <input type="button" value="add nested" onClick="addSub();"> 
      </div> 
     </div> 
     <input type="button" value="Add another text input" onClick="addNode();" > 
     <input type="submit" value = "answer" multiple="multiple"/> 

    </form> 
</html>

來源

2016-01-01 Courtney

你能提供一個小提琴嗎？ –

'addSub'似乎沒有添加任何按鈕。我相信你想重新組織你的代碼，以便兩個點擊處理程序調用一些函數來創建div。 –

然後，請注意，無論使用哪個按鈕調用它，addNode都執行完全相同的操作。還要注意，嵌套結構是短暫的：這種形式就是將所有輸入發佈到服務器的平面列表中。 –

這裏是一個完整的解決方案，你需要記住的是，如果你需要綁定在你生產的投入和按鈕外的事件，你就必須這樣做，裏面的功能ADDNODE或addSub像我一樣爲Click事件在按鈕上。

工作例如：https://jsfiddle.net/r70wqav7/

var counter = 1; 
 
function addNode(element) { 
 
\t counter++; 
 
    var new_entry="Entry "+counter+"<br><input type='text' name='myInputs'><br>"; 
 
    element.insertAdjacentHTML("beforebegin",new_entry); 
 
} 
 
function addSub(element) { 
 
\t counter++; 
 
\t var new_sub_entry="<div class='block'>" 
 
    \t \t \t \t \t \t \t \t +"Entry "+counter+"<br><input type='text' name='myInputs'><br>" 
 
        +"<div class='buttons'>" 
 
        +"<input class='add_sub_button' type='button' value='add nested'>" 
 
        +"<input class='add_button' type='button' value='Add another text input' >" 
 
        +"</div>" 
 
        +"</div><br />" 
 
        +"</div>"; 
 
    element.insertAdjacentHTML("beforebegin",new_sub_entry); 
 
    var blocks=element.parentNode.getElementsByClassName("block"); 
 
    blocks[blocks.length-1].getElementsByClassName("add_sub_button")[0].addEventListener("click",function(){ 
 
    \t addSub(this.parentNode); 
 
    }); 
 
    blocks[blocks.length-1].getElementsByClassName("add_button")[0].addEventListener("click",function(){ 
 
    \t addNode(this.parentNode); 
 
    }); 
 
} 
 

 
var buttons=document.getElementsByClassName("add_button"); 
 
for(i=0;i<buttons.length;i++){ 
 
\t buttons[i].addEventListener("click",function(){ 
 
    \t \t addNode(this.parentNode); 
 
    }); 
 
} 
 
var nested_buttons=document.getElementsByClassName("add_sub_button"); 
 
for(i=0;i<buttons.length;i++){ 
 
\t nested_buttons[i].addEventListener("click",function(){ 
 
    \t \t addSub(this.parentNode); 
 
    }); 
 
}

div.block{ 
 
    padding:5px; 
 
    border:2px solid #000; 
 
}

<form class="form" method="POST"> 
 
    <div class="block"> 
 
     Entry 1<br><input type="text" name="myInputs"><br> 
 
     <div class="buttons"> 
 
      <input class="add_sub_button" type="button" value="add nested"> 
 
      <input class="add_button" type="button" value="Add another text input" > 
 
     </div> 
 
    </div><br /> 
 
     <input type="submit" value = "answer" multiple="multiple"/> 
 
</form>

編輯：有一個錯誤的結合上更新才能正常工作

來源

2016-01-01 08:47:17 skpapam

這裏嵌套項目的單擊事件是另外一個樣例，這使得使用我在前面的評論中提到的概念。我已將「添加項目」按鈕移到窗體外，並更改了用於確定添加的每個新項目的文本的方法。我計算文檔中現有項目的數量並將其增加，使用它作爲字符串「條目n」中的n。

我應該在添加（附加）子項目之前按鈕創建新的按鈕，但是在添加了其他新元素之後，該按鈕很懶，並且只在按鈕上調用了appendChild - 最終結果相同，但效率較低，並且會導致性能下降/電池壽命縮短。

我打算使用.dynamicInput div的.cloneNode方法，當點擊「添加新項」，然而這將複製所有子項選擇的目標的，我們仍然需要調用addEventListener的按鈕，無論如何，所以我而是選擇了簡單地創建添加了「添加新項目」按鈕的每個輸入項目。

<!doctype html> 
<html> 
<head> 
<script> 
"use strict"; 
function byId(id,parent){return (parent == undefined ? document : parent).getElementById(id);} 
function allByClass(className,parent){return (parent == undefined ? document : parent).getElementsByClassName(className);} 
function allByTag(tagName,parent){return (parent == undefined ? document : parent).getElementsByTagName(tagName);} 
function newEl(tag){return document.createElement(tag);} 
function newTxt(txt){return document.createTextNode(txt);} 

window.addEventListener('load', onDocLoaded, false); 

function onDocLoaded(evt) 
{ 
    byId('addNewInputBtn').addEventListener('click', myAddNewItem, false); 
    var subItemBtn = document.querySelectorAll('.dynamicInput button')[0]; 
    subItemBtn.addEventListener('click', myAddSubItem, false); 
} 

function makeNewItem(titleStr) 
{ 
    var div = newEl('div'); 
    div.className = 'dynamicInput'; 

    var heading = newEl('h3'); 
    heading.innerText = titleStr; 
    div.appendChild(heading); 

    var input = newEl('input'); 
    div.appendChild(input); 

    var btn = newEl('button'); 
    btn.innerText = 'Add sub-items'; 
    btn.addEventListener('click', myAddSubItem, false); 
    div.appendChild(btn); 

    return div; 
} 


function myAddNewItem(evt) 
{ 
    var numAlreadyExisting = allByClass('dynamicInput').length;    // count number of divs with className = dynamicInput 
    var newNum = numAlreadyExisting + 1; 
    var newInputPanel = makeNewItem('Entry ' + newNum); 
    byId('myForm').appendChild(newInputPanel); 
    return false; 
} 

function myAddSubItem(evt) 
{ 
    evt.preventDefault();             // stops this button causing the form to be submitted 
    var clickedBtn = this; 
    var inputDiv = clickedBtn.parentNode; 
    var newInput = newEl('input'); 
    inputDiv.appendChild(newInput); 
    inputDiv.appendChild(clickedBtn); 
} 

</script> 
</head> 
<body> 
    <form id='myForm'> 
     <div class='dynamicInput'> 
     <h3>Entry 1</h3> 
     <input type='text'/><button>Add sub-item</button> 
     </div> 
    </form> 
    <button id='addNewInputBtn'>Add new item</button> 
</body> 
</html>

來源

2016-01-01 09:06:11 enhzflep

有沒有辦法動態創建嵌套的div onclick？

回答

相關問題