javascript - 在模板标签内的 dom 元素上添加事件监听器

Question

假设我在模板中有一个按钮

<template id="persons">
     <tr>
         <td></td>
         <td></td>
         <td><button type="button" id="delete" class="btn btn-danger">Delete</button></td>
     </tr>
</template>

现在我正在尝试通过以下方式向按钮添加事件监听器

this.oBtnDel = document.getElementById('delete');

this.oBtnDel.addEventListener("click", somefunc);

但是我得到一个错误提示

Cannot read property 'addEventListener' of null

我该如何解决这个问题？

Answer 1

模板中的项目不是常规 DOM 的一部分。当您绑定(bind)事件监听器时，它们将不存在。如果您有多个 ID，您也会遇到 id="delete" 的问题，因为 ID 必须是唯一的。

您需要做的是使用 event delegation , 我将使用 data attribute识别按钮。

模板

<template id="persons">
     <tr>
         <td></td>
         <td></td>
         <td><button type="button" data-action="delete" data-objectid="id to delete" class="btn btn-danger">Delete</button></td>
     </tr>
</template>

Javascript

//Bind the event to the parent table say it has an id of parentTable
this.oTable= document.getElementById('parentTable');    
this.oTable.addEventListener("click", function(event){
   //check the delete button was clicked
   if(event.target.dataset.action === "delete")
   {
       //Logic for delete goes here
       var idToDelete = event.target.dataset.objectid;
       /*Rest of your logic*/
   }
});

注意 上面的代码未经测试。如果它不起作用，您应该能够使用提供的链接来填补空白。

进一步阅读事件委托(delegate):https://davidwalsh.name/event-delegate