无法单击动态创建的表格单元格中的按钮

Question

我正在动态创建一个表格，其中每行末尾都有按钮。问题是，我无法使悬停效果起作用。如果我也在按钮上设置事件侦听器，则只有在 div 上设置的事件侦听器才会触发。当然，如果我只在按钮上设置事件侦听器，则什么也不会发生。else if (j == 5) {    //if it's the 5th column in the table, create a button in each row.    td.className = 'editrow';    var edit_btn = document.createElement('button');    edit_btn.innerText = "Edit";    edit_btn.className = 'edit_word';    td.appendChild(edit_btn);    td.addEventListener("click", function() {        //This shoots: when I click on the table cell (so on the button or outside it)        //I cannot set edit_btn.addEventListener, it doesn't do anything        console.log("clicked");    });}我相信按钮被 td 覆盖（或后面），这就是悬停不起作用的原因。这张图片可以帮助它想象。黄色背景色是悬停在 td 上方时拍摄的悬停效果（让它成为 td 或其中的按钮）。按钮的设计永远不会改变，我仔细检查了它应该是，是的，css 是正确的。

Answer 1

您可以在页面的头部部分尝试以下脚本：

<script>

document.addEventListener('click',function(e){

    if(e.target && e.target.className== 'edit_word'){

        console.log("clicked")

     }

 });

</script>

并从您的代码中删除 td.addEventListener 方法

或使用 jQuery

<script>

$(function(){ 

   $(document).on('click','.edit_word',function(){ 

       console.log("clicked"); 

    });

 });

</script>```