时间戳

首页 > 解决方案 > 删除按钮的事件侦听器不起作用 - Javascript

javascript - 删除按钮的事件侦听器不起作用 - Javascript

问题描述

我正在制作一个删除表数据的按钮，由于某种原因，当我单击该按钮时，我的单击事件侦听器什么也不做。如果您想查看所有代码，请查看codepen

const showExpenses = () => {

  const table = document.getElementById('expenseTable');

    table.innerHTML = '';
  
  for(let i = 0; i < expenses.length; i++){
        expenseTable.innerHTML += `
            <tr >
                <td class="expItem">${expenses[i].name}</td>
                <td class="expItem">${expenses[i].date}</td>
                <td class="expItem">$${expenses[i].amount}</td>
                <td><a class="deleteButton" onclick="handleRemove(${expenses[i].id})">
                    Delete</td>
            </tr>
        `;
    }
}

//Remove buttom
const handleRemove = e => {
  const item = e.target.closest('.expItem');
  
  // Remove the listener, to avoid memory leaks.
  item.querySelector('.deleteButton')
    .removeEventListener('onclick', handleRemove);
  
  item.parentElement.removeChild(item);
};

标签： javascript

解决方案

实际上，这样做的方法是在所有删除按钮上设置一个事件侦听器，并为它们提供 data-id 属性，以便您可以在单击时检索 id。然后访问最近的<tr>最后使用jQueryremove()

    expenseTable.innerHTML += `...
            <td><a class="deleteButton" href="#" data-id="${expenses[i].id}">Delete</a></td>
        ...

JS：

$(document).ready(function() {
   $('body').on('click', '.deleteButton', function(e) {
     e.preventDefault(); // prevent the href default 
     // if you need to access the id...
     let deleteID = $(this).data('id');
     $(this).closest('tr').remove();
   })
})

推荐阅读