在模板標記內的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>