Question

非常简单：使用jQuery我添加了一个带有删除按钮的新TR。但是当单击删除按钮时，没有任何反应（应删除新创建的TR）。我无法让它发挥作用。我几乎肯定它与此有关：

$('.delete-data').on('click touchstart', '.add-new', function() {

我的代码：

// if clicked on new button add new TR
$('.add-new').on('click touchstart', function() {
  if ($(this).hasClass('company')) {
    newTr('company');
  } else {
    newTr('user');
  }
})

// adds new TR to table
function newTr(type) {
  var table = $('table');

  if (table.hasClass(type)) {
    table.find('tbody').append(
      '<tr contenteditable="true">
        <td>New ' + type + ' name</td>
        <td>License type</td>
        <td>0</td>
        <td>Expiry date</td>
        <td>xYsqffSX3X4a</td>
        <td class="delete-data" title="Delete this">&times;</td>
      </tr>'
    );
  }
}

// deletes data from table
$('.delete-data').on('click touchstart', '.add-new', function() {
  var parent = $(this).parent(),
      label = parent.find("td:first").html(),
      r = window.confirm("Permanently delete " + label + " and all its data?");

  if (r == true)
    parent.remove();
})

有什么想法吗？谢谢！

修改感谢Barmar解决方案就是这个：

$('table').on('click touchstart', '.delete-data', function() {

Answer 1

尝试：

$("table").on('click touchstart', '.delete-data', function() {
    ...
}

使用事件委托时，必须绑定到静态元素（在本例中为$("table")），并为参数中的动态元素（.delete-data）提供一个选择器。

Answer 2

这是我在stackoverflow上的第一篇文章;）事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码调用时页面上。委托事件的优点是，它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委派事件来避免频繁附加和删除事件处理程序的需要。所以，关于你的例子：

$('.example_table').on('click touchstart', 'td.delete-data', function() {})

在jQuery中动态添加内容后，Button无法正常工作

2 个答案: