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

【问题标题】：Moving a table row with event listeners attached移动附加了事件侦听器的表行
【发布时间】：2016-04-07 14:14:36
【问题描述】：

我有一个用 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>

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

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

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

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

更新：

要在表格中添加一行，这就是我目前正在做的事情。本质上，我使用从选择中收集的引用和名称构造表格行 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);

【问题讨论】：

你能分享一下#reference 的标记以及它是如何与其兄弟姐妹堆叠的吗？
与其添加和删除事件监听器，不如考虑在某个父级上定义它们。
如果我动态添加了子元素，这会起作用吗？
这可能会回答你关于古怪建议的问题 - stackoverflow.com/a/25656078/2401021

标签： javascript jquery html

【解决方案1】：

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

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

现在您可以动态移动 tr，它将保留其事件处理程序。你可以在这里阅读更多信息：http://api.jquery.com/on/ 这将指向 tr。

【讨论】：