jQuery在表之间移动行会禁用JavaScript
jquery moving rows between table disables javascript
我在表之间移动行,它似乎工作正常,但是一旦该行在另一个表中,与该行相关的所有javascript函数都不再起作用,我不知道为什么。
javascript非常简单,我获取该行的html并将其移动到另一个表中。
如果您单击子选项卡,它们工作正常,但单击候补名单(或批准移动到上表)将其移动到下表,该行的选项卡不再工作。
奇怪的是没有抛出错误,并且控制台中没有记录任何内容。
http://jsfiddle.net/Ha3Jq/16/
Jquery
$( ".enrolled-participants" ).on("click","button.remove-participant",function(){
if($(this).hasClass('remove-participant'))
{
$(this).html('Approve');
$(this).removeClass('remove-participant').addClass('add-participant');
var className = $(this).closest('tr').attr('class');
var childClass =$(this).closest('tr').next().attr('class');
var current_row = $(this).closest('tr').html();
var child_row = $(this).closest('tr').next().html();
$(this).closest('tr').next().remove();
$(this).closest('tr').remove();
$('.waitlisted > tbody:last').append('<tr class="'+className+'">'+current_row+'</tr><tr class="'+childClass+'">'+child_row+'</tr>');
}
我也使用表排序器插件。
表排序器
$(".enrolled-participants,.waitlisted")
.tablesorter({
theme : 'blue',
// this is the default setting
cssChildRow: "tablesorter-childRow",
// initialize zebra and filter widgets
widgets: ["zebra", "filter"],
widgetOptions: {
// include child row content while filtering, if true
filter_childRows : true,
// class name applied to filter row and each input
filter_cssFilter : 'tablesorter-filter',
// search from beginning
filter_startsWith : false,
// Set this option to false to make the searches case sensitive
filter_ignoreCase : true
}
});
// hide child rows
//$('.tablesorter-childRow td').hide();
// Toggle child row content (td), not hiding the row since we are using rowspan
// Using delegate because the pager plugin rebuilds the table after each page change
// "delegate" works in jQuery 1.4.2+; use "live" back to v1.3; for older jQuery - SOL
$('.tablesorter').delegate('.toggle', 'click' ,function(){
//alert('ok');
// use "nextUntil" to toggle multiple child rows
// toggle table cells instead of the row
$(this).closest('tr').nextUntil('tr:not(.tablesorter-childRow)').find('td').toggle();
return false;
});
// Toggle widgetFilterChildRows option
$('button.toggle-option').click(function(){
var c = $('.tablesorter')[0].config.widgetOptions,
o = !c.filter_childRows;
c.filter_childRows = o;
$('.state').html(o.toString());
// update filter; include false parameter to force a new search
$('input.tablesorter-filter').trigger('search', false);
return false;
});
使用 detach
而不是 remove
。
remove
从 DOM 中删除它,并删除所有 (JavaScript) 事件侦听器。
detach
只是将其从 DOM 中删除;事件侦听器保持不变。
相关文章:
- Javascript移动站点重定向问题
- javascript移动交叉浏览器确定用户是否滚动到页面底部
- Javascript移动重定向问题
- 尝试使用键盘javascript移动画布
- Javascript - 移动滑动滚动
- 什么'这段用javascript移动css元素的代码错了
- 使用Javascript移动到同一页面中的另一帧
- 如何使用javascript移动图像
- Edge动画:如何将javascript移动到html中
- 将javascript移动到单独的文件中,ajax调用会出现错误
- HTML Javascript移动重定向
- 使用JavaScript移动页面上的按钮
- 我们如何在javascript移动应用程序中记录骨干历史堆栈列表
- 如何将内联 javascript 移动到脚本标记
- 使用 javascript 移动或存储文本
- Javascript:移动浏览器的“视点”
- 使用 Raphael JavaScript 移动多个元素
- JavaScript 移动延迟和多次击键
- 将 JavaScript 移动到 ASPX 页面的底部以减少 PageLoad
- 使用具有正确光标定位的 Javascript 移动元素