Javascript 加载页面后，如何更改onclick事件上的可单击元素？

加载页面时，有一个元素在单击时应运行函数：

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>

（…更多的教练，数量不同…）

您可以改为使用事件委派，并使用

GetElementsByCassName

，它返回一个liveHTMLCollection。单击后，检查目标是否为集合中的最后一个元素：

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'，'click'）}，2000）；
const elements=document.getElementsByClassName（“我的元素”）；
document.addEventListener（'click'，（{target}）=>{
if（元素[elements.length-1]。包含（目标））{
log（'last element clicked'）；
}
});非常感谢，非常完美：）我在startpost中添加了简化版的HTML。