Question

我有一个用Bootstrap实现的表，即：

<table id="user-area-table" class="table">
  <thead>
     <tr>
       <th>Name</th>
       <th>Adjust</th>
       <th>Visibility</th>
       <th colspan="2">Order</th>
       <th></th>
     </tr>
  </thead>
  <tbody>
  </tbody>
</table>

然后从select中，用户填充表。表中的每一行都有许多可能的操作：向上，向下，删除等，并且我在使用JQuery预先添加/附加所需的表行之后添加事件侦听器来执行这些操作。

在 up 等操作上，使用JQuery删除现有行，我必须将其重新插入DOM。

$("#reference").on('click', '.fa-sort-asc', function(evt) {
     $("#reference").prev().before($("#reference"));
});

我遇到的问题是我现在必须添加事件监听器，因为DOM元素都是新的，但我在其中一个事件监听器回调中。我怀疑处理这个问题的方法是添加一些代码来捕获我动态添加的 tr 上的任何事件，但我不确定如何做到这一点。

更新

要在表格中添加一行，这就是我目前正在做的事情。基本上我使用从select中收集的引用和名称来构造表行html，然后将其插入到表中。

var rowdata = '<tr id="' + reference + '" class="prop-layer"><td>' + name + '</td><td><a href="#"><i class="fa fa-adjust"></i></a></td><td><input type="checkbox" name="checkbox1" class="slider" data-size="mini" checked></td><td><a href="#"><i class="fa fa-sort-asc"></i></a></td><td><a href="#"><i class="fa fa-sort-desc"></i></a></td><td><a href="#"><i class="fa fa-trash"></i></a></td></tr>';
$('#user-area-table tbody').prepend(rowdata);

Answer 1

您将事件处理程序分配给某个父级，如body，如下所示：

$("body").on('click', 'tr', function(evt) {
});

现在你可以动态移动tr，它将保留其事件处理程序。您可以在此处详细了解：http://api.jquery.com/on/ 这将指向tr。

移动附加了事件侦听器的表行

1 个答案: