Блог

Когда страницы загружаются, есть один элемент, который должен запускать функцию при нажатии на него:

 var myArray = document.querySelectorAll(".my-element");

myArray[(myArray.length)-1].onclick = function() {  
    // function content
}
  

Позже некоторые элементы будут заменены, удалены или будут добавлены новые.
Таким образом, myArray[(myArray.length)-1] будет другим элементом, чем раньше.

И на данный момент это не работает. Новый элемент не будет прослушивать мои события нажатия. Есть ли какой-либо способ «обновить» это событие onclick?

Как и просили, вот упрощенная версия html, она находится в:

 <div id="track-1">

<div class="coach">

<div class="my-element">
</div>

<div class="my-element">
</div>

</div>

(... some more coaches, the amount varies ...)


<div class="coach">

<div class="my-element">
</div>

<div class="my-element">
</div>

</div>

</div>
  

Вместо этого вы можете использовать делегирование событий и использовать getElementsByClassName , который возвращает live HTMLCollection. При нажатии проверьте, является ли целевой элемент последним элементом в коллекции:

 const elements = document.getElementsByClassName("my-element");
document.addEventListener('click', ({ target }) => {
  if (elements[elements.length - 1].contains(target)) {
    console.log('last element clicked');
  }
});
  

 setInterval(() => { document.body.insertAdjacentHTML('beforeend', '<div class="my-element">click</div>') }, 2000);


const elements = document.getElementsByClassName("my-element");
document.addEventListener('click', ({ target }) => {
  if (elements[elements.length - 1].contains(target)) {
    console.log('last element clicked');
  }
});  

Вероятно, можно было бы найти более элегантное решение, учитывая HTML.