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

Question

我正在动态创建一个表，其中每行末尾都有按钮。

问题是，我无法使悬停效果起作用。 如果我也将按钮设置为eventlistener，则只有div上设置的eventlistener才会拍摄。 当然，如果仅在按钮上设置事件监听器，则什么也不会发生。

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>```

Answer 2

您发布的代码可以正常工作。 也许还有其他问题，例如CSS指针事件覆盖或HTML结构问题。 如果右键单击按钮并选择“检查元素”，会突出显示哪个元素会发生什么？

https://jsfiddle.net/amsv/tk3jbcms/

<table>
  <tbody>
    <tr>
      <td id="td"></td>
      <td id="result"></td>
    </tr>
  </tbody>
</table>

var td = document.getElementById("td");
var clicked = 0;

td.className = 'editrow';

var edit_btn = document.createElement('button');
edit_btn.innerText = "Edit";
edit_btn.className = 'edit_word';

td.appendChild(edit_btn);

edit_btn.addEventListener("click", function() {
    // Logging number of times clicked..
    var result = document.getElementById("result");
    result.innerHTML = "Clicked: " + clicked++ + " times."
});