Как написать функцию onclick для динамически генерируемой кнопки

Question

У меня есть несколько кнопок, которые выглядят так: .

Это «белый список» сайтов.Я бы хотел, чтобы кнопка удалила соответствующий сайт из белого списка.

Однако, поскольку эти кнопки генерируются при каждом добавлении сайта (вводимого пользователем), я не знаю, как получить ElementID для использования в моей функции.

Вот где генерируется кнопка:

  var cellWebsite = document.createElement("td");
  var website = document.createTextNode(array[i]);

  //append cell text to cell, then cell to row (like setting a "stage")
  cellWebsite.appendChild(website);
  row.appendChild(cellWebsite);

  //create a cell & cell text for BUTTON
  var cellDelete = document.createElement("td");
  var button = document.createElement("BUTTON"); //has its own element
  var text = document.createTextNode("x");
  button.appendChild(text);
  cellDelete.appendChild(button);
  row.appendChild(cellDelete);

Как получить идентификатор, чтобы я мог написать функцию для нажатия кнопки X?В рамках этой функции, как я могу получить веб-сайт, который соответствует этой кнопке?

Я создаю расширение Chrome и использую локальное хранилище Chrome, если это имеет значение.

Answer 1

Когда ваш элемент создается динамически, вы должны делегировать событие для обработки события.

Делегирование события позволяет вам избежать добавления прослушивателей событий для определенных узлов;вместо этого слушатель события добавляется к одному из родителей.Этот слушатель событий анализирует всплывающие события, чтобы найти совпадение для дочерних элементов.

Пример:

var counter = -1;

function addRow() {
    counter++;

    var table = document.getElementById( 'myTable' ),
        row = table.insertRow( counter ),
        cell = row.insertCell( 0 ),
        cellDelete = row.insertCell( 1 ),
        button = document.createElement( 'button' ),
        text = document.createTextNode( 'X' );

    cell.innerHTML = 'wikipedia.org ' + counter;
    button.appendChild( text );
    cellDelete.appendChild( button );

    button.addEventListener( 'click', function ( e ) {
        table.deleteRow( e.target.parentNode.parentNode.rowIndex );
        counter--
    } )
}

body {
    margin: 0
}
table {
    width: 100%
}
td {
    padding: 8px;
    border-bottom: 1px solid #ddd
}
td:nth-child(even) {
    text-align: right
}
tr:nth-child(odd) {
    background-color: #efefef
}

<button type="button" onclick="addRow()">Add new row</button>
<br>
<table id="myTable"></table>

Answer 2

Я не могу комментировать, потому что мне нужно 50 респ.за это, но ты не можешь дать ему приростПри каждом добавлении просто увеличивайте идентификатор или имя на 1, а затем вы можете указать идентификатор или имя.

Answer 3

Проверьте вид проверки вашего браузера и посмотрите, установлены ли id и другие атрибуты.

Если это не сработало, используйте атрибут id формы для индекса элемента как var x = document.getElementById ("myForm"). Elements [0] .value;

Если для формы не указан идентификатор:

var x = document.forms [0] .id;Или var x = document.forms.item (0) .id;

Answer 4

Самый простой способ - добавить прослушиватель событий в переменную кнопки, например, так:

const btn = document.createElement('button');
btn.innerText = "Click me!";
btn.addEventListener('click', function(event) {
  console.log('Fired!');
});