Блог

Главная - Вопросы по программированию - Добавление события onclick к динамически создаваемым кнопкам в javascript без использования библиотеки

Добавление события onclick к динамически создаваемым кнопкам в javascript без использования библиотеки

#javascript #events #buttonclick

#javascript #Мероприятия #buttonclick

Вопрос:

Я хочу добавить событие onclick к динамически создаваемым кнопкам на основе данных. Я попытался добавить событие в тот же цикл, в котором создаются кнопки. но работает только событие onclick последней кнопки, а остальные не работают.

если я добавлю отдельный цикл для добавления событий, он будет работать для всех кнопок, как и ожидалось. Я хочу знать, почему я не смог добиться этого в том же цикле. прокомментированный блок — это код, который я пытался добавить внутри цикла для добавления события. Кроме того, пожалуйста, предложите, есть ли какой-либо лучший способ сделать это (просто хочу попробовать без библиотек, без особой причины).

Код:

 function a() {
  var objContent = document.getElementById('content')
  var fruits = ['apple', 'banana', 'orange', 'grapes']

  for (var i in fruits) {
    var buildHtml = `<div id="content">
                            <div id="editsection">
                                <button id="${fruits[i]}" class="buttons" value="${fruits[i]}">${fruits[i]}</button>
                            </div>
                            <div id="deletesection">
                            </div>
                        </div>`

    objContent.innerHTML  = buildHtml

    **/* var objFruitButton = document.getElementById(fruits[i])
    objFruitButton.addEventListener("click", function (){
    onClick(objFruitButton.value)
    }, false); */**
  }

  fruits.forEach(function(i) {
    var objFruitButton = document.getElementById(i)
    objFruitButton.addEventListener("click", function() {
      onClick(objFruitButton.value)
    })
  })
}

function onClick(x) {
  console.log("value:", x);
}
a(); 
 <div id="content"></div>

Комментарии:

1. Это проблема с переменной областью видимости. Либо сохраните значение как data свойство кнопки и восстановите его в событии click, либо переместите содержимое цикла в функцию, чтобы создать новую область

2. Я сделал вам фрагмент, я предположил, что у вас есть div в качестве элемента содержимого id, также я добавил вызов функции a .

3. Спасибо Алексу за редактирование, да, у меня есть div с содержимым в качестве идентификатора, и я выполняю вызов функции.

4. Спасибо, Саймон, текущий код с foreach работает нормально, как и ожидалось. Я задаюсь вопросом, почему блок с комментариями внутри цикла for, в котором я создаю кнопки, не работает. оно добавляет событие только для последней кнопки. Я могу получить доступ к значению кнопки в предупреждении, но только не к событию щелчка. зачем нам нужен отдельный forloop для добавления события click.