adding event listener on a dom element inside template tag

Question

Suppose I have button inside a template

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

Now im trying to add an event listener to the button by

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

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

however im getting an error saying

Cannot read property 'addEventListener' of null

how can i fix this?

Answer 1

Items in templates are not part of the regular DOM. They will not be there when you are binding the event listener. You will also have a problem with id="delete" if you have more than one as Ids must be unique.

What you need to do is use event delegation , and I will use a data attribute to identify the button.

Template

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

NOTE the code above is untested. If it doesn't work, you should be able to fill in the gaps with the links provided.

Further reading on event delegation: https://davidwalsh.name/event-delegate

Answer 2

According to MDN ,

The HTML Content Template ( <template> ) element is a mechanism for holding HTML that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using JavaScript.

Think of a template as a content fragment that is being stored for subsequent use in the document. While the parser does process the contents of the <template> element while loading the page, it does so only to ensure that those contents are valid; the element's contents are not rendered , however.

The contents of <template> are not yet rendered when you are trying to attach an event handler to the button. Try attaching the event handler after including the template to an element.

See the snippet below:

 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

Try like this.

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

Answer 4

This is return "null" error because tag is not define in HTML i convert to or any other tag ... it's solved.

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