0

真的很简单：使用 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() {
4

2 回答 2

1

尝试：

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

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

于 2013-10-07T20:37:01.330 回答
1

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

$('.example_table').on('click touchstart', 'td.delete-data', function() {})
于 2013-10-07T20:50:32.020 回答