在模板标记内的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);

但我得到一个错误说

无法读取null的属性'addEventListener'

我怎样才能解决这个问题？

Answer 1

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

你需要做的是使用事件委托 ，我将使用数据属性来识别按钮。

模板

<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*/
   }
});

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

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

Answer 2

根据MDN ，

HTML内容模板（ <template> ）元素是一种用于保存HTML的机制，该页面在加载页面时不会立即呈现，但可以在运行时使用JavaScript进行实例化。

将模板视为正在存储的内容片段，以便随后在文档中使用。 虽然解析器在加载页面时会处理<template>元素的内容，但它只是为了确保这些内容有效; 但是，元素的内容不会被渲染 。

当您尝试将事件处理程序附加到按钮时，尚未呈现<template>的内容。 在将模板包含到元素后尝试附加事件处理程序。

请参阅下面的代码：

 var template = document.getElementById("persons"); document.body.appendChild(template.content); this.oBtnDel = document.getElementById('delete'); this.oBtnDel.addEventListener("click", () => console.log("click")); 

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

Answer 3

试试这样吧。

 <script> 
        document.getElementById("delete").addEventListener("click", function(){ 
        // Write your function here
    }); 
        </script> 

Answer 4

这是返回“null”错误，因为标签未在HTML中定义我转换为或任何其他标签...它已解决。

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

<script>
    function somefunc() {
        alert("hello world ...");
    }
    var oBtnDel = document.getElementById('delete');
   oBtnDel? oBtnDel.addEventListener("click", somefunc) : alert("false");
</script>