移动使用事件侦听器表行连接

我与引导，也就是实现了一个表：移动使用事件侦听器表行连接

<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之前预先挂接/附加所需的表行。

在诸如以上之类的操作中，使用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);

来源

2016-04-07 timbo

你可以分享有'＃reference'的标记以及它如何堆叠在它的兄弟姐妹中吗？ – gurvinder372

不要添加和删除事件侦听器，而应考虑在父级上定义它们。 – freakish

如果我已经动态地添加子元素，这会工作吗？ – timbo

您事件处理函数分配到一些家长，像body，像这样：

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

现在，您可以动态地左右移动TR，它会保持它的事件处理程序。你可以在这里阅读更多关于它的信息：http://api.jquery.com/on/ 这将指向tr。

来源

2016-04-07 06:14:36

移动使用事件侦听器表行连接

回答

相关问题