如何點擊按鈕點擊動態創建的元素？

Question

我想創建簡單的待辦事項列表應用程序，我創建了從輸入框獲取值的函數，並且在函數內部創建了復選框附近的文本，現在我想創建將在每次單擊復選框時執行的函數。 由於當文檔加載我收到錯誤時頁面上沒有復選框，我怎樣才能使其正常工作？

這是我的代碼：

 var btn = window.document.getElementById("btn"); var result = window.document.getElementById("result"); function getValue() { var input = window.document.getElementById("input").value; var checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.className = 'checkbox'; result.appendChild(checkbox); result.innerHTML += input + "<br>"; } var checkbox = document.getElementById('checkbox'); btn.addEventListener('click', getValue); checkbox.addEventListener('click', function(){ alert("Clicked"); }); 

 <input type="text" id="input"> <input type="button" value="Submit" id="btn"> <div id="result"> </div> 

Answer 1

這就是它的制作方式。

創建復選框后，需要移動addEventListener 。

此外，您需要使用createTextNode因為使用innerHTML會分離您的addEventListeners （ 1 ）。 出於同樣的原因，您需要將appendChild移動到函數的底部。

 var btn = window.document.getElementById("btn"); var result = window.document.getElementById("result"); function getValue() { var input = window.document.getElementById("input").value; var checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.addEventListener('click', function(){ alert("Clicked"); }); text = document.createTextNode(input); result.appendChild(checkbox); result.appendChild(text); } var checkbox = document.getElementById('checkbox'); btn.addEventListener('click', getValue); 

 <input type="text" id="input"> <input type="button" value="Submit" id="btn"> <div id="result"> </div> 

Answer 2

不幸的是，我不在我的電腦附近，也無法輸入代碼示例。 我假設您希望新添加的復選框在您單擊時調用函數？ 為此，您需要在創建新復選框后將其添加到新復選框。 您可以在創建新復選框（getValue）的函數中執行此操作。

如果我說的不清楚，我會在稍后給你寫一個代碼示例。