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

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){&nbsp; &nbsp; if(e.target && e.target.className== 'edit_word'){&nbsp; &nbsp; &nbsp; &nbsp; console.log("clicked")&nbsp; &nbsp; &nbsp;}&nbsp;});</script>并从您的代码中删除 td.addEventListener 方法或使用 jQuery<script>$(function(){&nbsp;&nbsp; &nbsp;$(document).on('click','.edit_word',function(){&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;console.log("clicked");&nbsp;&nbsp; &nbsp; });&nbsp;});</script>```