動態創建按鈕的Click事件
[英]Click event for dynamically created button
問題描述
我有一個函數（在最底部看到），該函數創建一個HTML表，並根據數組的內容將其填充為X行數。 每行有2個單元格，該位置的數組值及其旁邊的按鈕。
我希望能夠單擊這些按鈕並從表中刪除特定行。
但是，我不能使用標准的click事件：
function unMatchButtonClicked(){
var button = document.getElementById('unmatch').onclick;
}
因為它將拋出一個錯誤，即id不存在，並且因為我的行數可能為X，所以我需要某種for循環。
我的偽嘗試是：
for (var i=0; i < table.length; i++){
var button = document.getElementById('unmatch')
if (button.clicked){
remove row}
}
我不太清楚該怎么做。
也請只使用純JS解決方案，不要使用Jquery。
編輯：
function makeHTMLMatchesTable(array){
var table = document.createElement('table');
for (var i = 0; i < array.length; i++) {
var row = document.createElement('tr');
var cell = document.createElement('td');
cell.textContent = array[i];
row.appendChild(cell);
cell = document.createElement('td');
var button = document.createElement('button');
button.setAttribute("id", "unMatchButton" +i);
cell.appendChild(button);
row.appendChild(cell);
table.appendChild(row);
}
return table;
}
3 個解決方案
解決方案1
1 已采納 2016-10-14 09:53:37
使用addEventListener()創建元素時添加事件：
...
var button = document.createElement('button');
button.setAttribute("id", "unMatchButton" +i);
button.addEventListener("click", clickEventFunction, false);
...
希望這可以幫助。
function makeHTMLMatchesTable(array) { var table = document.createElement('table'); table.setAttribute("border", 1); for (var i = 0; i < array.length; i++) { var row = document.createElement('tr'); var cell = document.createElement('td'); cell.textContent = array[i]; row.appendChild(cell); cell = document.createElement('td'); var button = document.createElement('button'); button.setAttribute("id", "unMatchButton" + i); button.textContent = "Delete"; //click Event button.addEventListener("click", delete_row, false); cell.appendChild(button); row.appendChild(cell); table.appendChild(row); } return table; } function delete_row() { this.parentNode.parentNode.remove(); } document.body.appendChild(makeHTMLMatchesTable(['Cell 1','Cell 2','Cell 3','Cell 4']));
解決方案2
1 2016-10-14 09:53:44
在<table>上添加一個click處理程序。 然后，您可以檢查event.target如果單擊是由<button>觸發的。 如果是，則向上移動DOM直到到達周圍的<tr>元素並對其調用.remove() 。
function makeHTMLMatchesTable(array) { var table = document.createElement('table'); for (var i = 0; i < array.length; i++) { var row = document.createElement('tr'); var cell = document.createElement('td'); cell.textContent = array[i]; row.appendChild(cell); cell = document.createElement('td'); var button = document.createElement('button'); button.setAttribute("id", "unMatchButton" + i); button.textContent = "Remove"; cell.appendChild(button); row.appendChild(cell); table.appendChild(row); } table.addEventListener("click", removeRow, false); return table; } function removeRow(evt) { if (evt.target.nodeName.toLowerCase() === "button") { evt.target.parentNode.parentNode.remove(); // .parentNode.parentNode == <tr> } } document.body.appendChild(makeHTMLMatchesTable([1, 2, 3, 4]));
解決方案3
0 2016-10-14 12:31:47
詳細信息在源代碼中進行注釋。 也有一個PLUNKER 。
<!DOCTYPE html> <html> <head> <style> table, td { border: 1px solid red; } button { height: 24px; width: 24px; } </style> </head> <body> <script> var array1 = [1, 2, 3, 4, 5, 6, 7, 8, 9]; function makeHTMLMatchesTable(array) { var table = document.createElement('table'); for (var i = 0; i < array.length; i++) { var row = document.createElement('tr'); var cell = document.createElement('td'); cell.textContent = array[i]; row.appendChild(cell); cell = document.createElement('td'); var button = document.createElement('button'); button.setAttribute("id", "unMatchButton" + i); cell.appendChild(button); row.appendChild(cell); table.appendChild(row); } // This is added to comlete this function return document.body.appendChild(table); } makeHTMLMatchesTable(array1); // Reference table var table = document.querySelector('table'); /* | - Add an eventListener for ckick events to the table | - if event.target (element clicked; ie button) | is NOT the event.currentTarget (element that | is listening for the click; ie table)... | - ...then assign a variable to event.target's | id (ie #unMatchButton+i) | - Next extract the last char from the id (ie from | #unMatchButton+i, get the 'i') | - Then convert it into a real number. | - Determine the row to which the button (ie event | .target) belongs to by using the old rows method. | - while row still has children elements... | - ...remove the first child. Repeat until there are | no longer any children. | - if the parent of row exists (ie table which it | does of course)... | - ...then remove row from it's parents */ table.addEventListener('click', function(event) { if (event.target !== event.currentTarget) { var clicked = event.target.id; var i = clicked.substr(-1); var idx = Number(i); var row = this.rows[idx]; while (row.children > 0) { row.removeChild(row.firstChild); } if (row.parentNode) { row.parentNode.removeChild(row); } return false } }, false); </script> </body> </html>
如何在 Angular 6 中動態創建的按鈕上綁定點擊事件？
[英]How to bind on click event on dynamically created button in Angular 6?
jQuery-Click事件不適用於表中動態創建的按鈕
[英]jquery - Click event not working for dynamically created button within a table
單擊按鈕而不是動態創建的select元素時會觸發onchange事件
[英]onchange event is fired on button click and not on dynamically created select element
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.