表排序器在 jquery 页面加载后变得不起作用
Tablesorter becomes non-functional after jquery page load
我有一个具有可变刷新率的页面，并显示几个表格。表排序器.js代码最初工作正常，但在第一次刷新后其不起作用。
我尝试将表排序器函数放在每个分支的单击函数中，或者在整个单击函数的末尾或加载函数内-和-在查看了表排序器的文档后，我尝试在上述所有情况下调用$("#workstation-table").trigger("update", true)。每次都是一样的。首次刷新后不起作用。任何建议都会很棒。
HAML 代码（如有必要，底部为 HTML）：
.whole-page
.container
%h1#application-title.hero-unit
.row-fluid
.span1
= image_tag "cog_logo.png"
= image_tag "crs.png"
Replication Server
.span1.pull-right#refresh-label
Refresh Rate:
.btn-group#refresh-buttons
%button.btn.btn-default#refresh-5-sec 5 sec
%button.btn.btn-default#refresh-30-sec 30 sec
%button.btn.btn-default#refresh-60-sec 60 sec
%h2
%small Status Dashboard
#status-tables
.col-md-4
%h3 Reports
#report-table-panel.panel
%a.accordion-toggle{ :data => { :toggle => "collapse", :target => "#collapse-cidne"} } CIDNE
#collapse-cidne.uncollapse.in
%table#report-table.table.table-striped.table-hover.table-bordered
%thead
%tr
%th#table-header Source
%th#table-header Type
%th#table-header Count
%tbody
- @reports.each do |report|
- if report[:source] == "CIDNE"
%tr
%td
= report[:source]
%td
= report[:type]
%td
= report[:count]
#report-table-panel.panel
%a.accordion-toggle{ :data => { :toggle => "collapse", :target => "#collapse-dcgs"} } DCGS
#collapse-dcgs.uncollapse.in
%table#report-table.table.table-striped.table-hover.table-bordered
%thead
%tr
%th#table-header Source
%th#table-header Type
%th#table-header Count
%tbody
- @reports.each do |report|
- if report[:source].blank?
- elsif report[:source] == "DCGS"
%tr
%td
= report[:source]
%td
= report[:type]
%td
= report[:count]
.col-md-5
%h3#workstation-title Workstations
.span-1
#sort-instructions (click column name to sort)
%table#workstation-table.table.table-striped.table-hover.table-bordered
%thead
%tr
%th#table-header Name
%th#table-header Downloaded
%th#table-header Available
%th#table-header Last Connect
%tbody
- @workstations.each do |workstation|
%tr
%td
= workstation[:name]
%td
= workstation[:downloaded]
%td
= workstation[:available]
%td
= workstation[:last_connect]
.col-md-3
%h3 Source
%table.table.table-striped.table-hover.table-bordered
%tr
%th#table-header Type
%th#table-header Name
%th#table-header Status
- @data_sources.each do |data_source|
%tr
%td
= data_source[:type]
%td
= data_source[:name]
%td
- if data_source[:status] == "UP"
#service-up
- else
#service-down
JS代码：
$(document).ready(function() {
var intervalId = window.setInterval(function(){
$('.container').load('/dashboard/index .container');
}, 60000);
$("#refresh-60-sec").addClass("pressed-button");
$("#application-title").on("click", "#refresh-buttons button", function(event) {
var interval = 0;
switch(event.target.id) {
case "refresh-5-sec" :
interval = 5000;
$(this).parent().children().removeClass("pressed-button");
$(this).addClass("pressed-button");
break;
case "refresh-30-sec" :
interval = 30000;
$(this).parent().children().removeClass("pressed-button");
$(this).addClass("pressed-button");
break;
case "refresh-60-sec" :
interval = 60000;
$(this).parent().children().removeClass("pressed-button");
$(this).addClass("pressed-button");
break;
}
if (interval != 0)
{
clearInterval(intervalId);
intervalId = setInterval(function(){
$('#status-tables').load('/dashboard/index #status-tables',
function() {
$("#workstation-table").trigger("update", true)
});
}, interval);
}
});
$("#workstation-table").tablesorter();
});
.HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org" />
<title>Webui</title>
<link data-turbolinks-track="true" href="/assets/application.css" media="all" rel=
"stylesheet" type="text/css" />
<script data-turbolinks-track="true" src="/assets/application.js" type=
"text/javascript">
</script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="D/VkaPDSNH5HHMazYu8dS8hcgGSIMl5rl5QS+eBnDyQ=" name="csrf-token" />
</head>
<body>
<div class='whole-page'>
<div class='container'>
<h1 class='hero-unit' id='application-title'></h1>
<div class='row-fluid'>
<h1 class='hero-unit' id='application-title'></h1>
<div class='span1'>
<h1 class='hero-unit' id='application-title'><img alt="Cog logo" src=
"/assets/cog_logo.png" /> <img alt="Crs" src="/assets/crs.png" /> Replication
Server</h1>
<div class='span1 pull-right' id='refresh-label'>
<h1 class='hero-unit' id='application-title'>Refresh Rate:</h1>
<div class='btn-group' id='refresh-buttons'>
<h1 class='hero-unit' id='application-title'><button class=
'btn btn-default' id='refresh-5-sec'>5 sec</button> <button class=
'btn btn-default' id='refresh-30-sec'>30 sec</button> <button class=
'btn btn-default' id='refresh-60-sec'>60 sec</button></h1>
</div>
</div>
</div>
</div>
<h2><small>Status Dashboard</small></h2>
<div id='status-tables'>
<div class='col-md-4'>
<h3>Reports</h3>
<div class='panel' id='report-table-panel'>
<a class='accordion-toggle' data-target='#collapse-cidne' data-toggle=
'collapse'>CIDNE</a>
</div>
<div class='uncollapse in' id='collapse-cidne'>
<table class='table table-striped table-hover table-bordered' id=
'report-table'>
<thead>
<tr>
<th id='table-header'>Source</th>
<th id='table-header'>Type</th>
<th id='table-header'>Count</th>
</tr>
</thead>
<tr>
<td>CIDNE</td>
<td>et</td>
<td>5,070,127</td>
</tr>
<tr>
<td>CIDNE</td>
<td>laborum</td>
<td>8,674,267</td>
</tr>
<tr>
<td>CIDNE</td>
<td>sed</td>
<td>1,239,300</td>
</tr>
<tr>
<td>CIDNE</td>
<td>quos</td>
<td>826,247</td>
</tr>
<tr>
<td>CIDNE</td>
<td>dolorem</td>
<td>4,375,838</td>
</tr>
<tr>
<td>CIDNE</td>
<td>quos</td>
<td>8,932,341</td>
</tr>
<tr>
<td>CIDNE</td>
<td>ullam</td>
<td>2,504,480</td>
</tr>
<tr>
<td>CIDNE</td>
<td>et</td>
<td>4,178,823</td>
</tr>
<tr>
<td>CIDNE</td>
<td>vitae</td>
<td>3,945,054</td>
</tr>
<tr>
<td>CIDNE</td>
<td>vitae</td>
<td>1,158,563</td>
</tr>
<tr>
<td>CIDNE</td>
<td>ipsa</td>
<td>5,673,954</td>
</tr>
<tr>
<td>CIDNE</td>
<td>et</td>
<td>8,947,587</td>
</tr>
</table>
</div>
<div class='panel' id='report-table-panel'>
<a class='accordion-toggle' data-target='#collapse-dcgs' data-toggle=
'collapse'>DCGS</a>
</div>
<div class='uncollapse in' id='collapse-dcgs'>
<table class='table table-striped table-hover table-bordered' id=
'report-table'>
<thead>
<tr>
<th id='table-header'>Source</th>
<th id='table-header'>Type</th>
<th id='table-header'>Count</th>
</tr>
</thead>
<tbody>
<tr>
<td>DCGS</td>
<td>Voluptates</td>
<td>8,549,353</td>
</tr>
<tr>
<td>DCGS</td>
<td>Tempore</td>
<td>8,611,361</td>
</tr>
<tr>
<td>DCGS</td>
<td>Provident</td>
<td>1,461,613</td>
</tr>
<tr>
<td>DCGS</td>
<td>Velit</td>
<td>3,823,704</td>
</tr>
<tr>
<td>DCGS</td>
<td>Velit</td>
<td>2,079,617</td>
</tr>
<tr>
<td>DCGS</td>
<td>Tempore</td>
<td>2,004,062</td>
</tr>
<tr>
<td>DCGS</td>
<td>Velit</td>
<td>7,906,194</td>
</tr>
<tr>
<td>DCGS</td>
<td>Tempore</td>
<td>4,367,449</td>
</tr>
<tr>
<td>DCGS</td>
<td>Voluptates</td>
<td>4,405,687</td>
</tr>
<tr>
<td>DCGS</td>
<td>Voluptates</td>
<td>6,369,859</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class='col-md-5'>
<h3 id='workstation-title'>Workstations</h3>
<div class='span-1'>
<div id='sort-instructions'>
(click column name to sort)
</div>
</div>
<table class='table table-striped table-hover table-bordered' id=
'workstation-table'>
<thead>
<tr>
<th id='table-header'>Name</th>
<th id='table-header'>Downloaded</th>
<th id='table-header'>Available</th>
<th id='table-header'>Last Connect</th>
</tr>
</thead>
<tbody>
<tr>
<td>repellat</td>
<td>16,957</td>
<td>9,681,569</td>
<td>2013-08-25 01:59:43</td>
</tr>
<tr>
<td>qui</td>
<td>40,374</td>
<td>4,768,666</td>
<td>2013-07-06 02:45:04</td>
</tr>
<tr>
<td>consequatur</td>
<td>4,067</td>
<td>4,201,935</td>
<td>2013-07-26 21:42:00</td>
</tr>
<tr>
<td>sunt</td>
<td>11,049</td>
<td>5,605,974</td>
<td>2013-08-25 21:37:52</td>
</tr>
<tr>
<td>accusamus</td>
<td>1,870</td>
<td>6,209,493</td>
<td>2013-07-09 02:45:25</td>
</tr>
<tr>
<td>voluptate</td>
<td>40,900</td>
<td>9,647,011</td>
<td>2013-07-22 03:29:08</td>
</tr>
<tr>
<td>sint</td>
<td>33,815</td>
<td>6,141,657</td>
<td>2013-08-09 16:48:21</td>
</tr>
<tr>
<td>optio</td>
<td>22,849</td>
<td>6,901,660</td>
<td>2013-07-19 20:37:10</td>
</tr>
</tbody>
</table>
</div>
<div class='col-md-3'>
<h3>Source</h3>
<table class='table table-striped table-hover table-bordered'>
<tr>
<th id='table-header'>Type</th>
<th id='table-header'>Name</th>
<th id='table-header'>Status</th>
</tr>
<tr>
<td>CIDNE</td>
<td>http://gaylord.biz/kayla.mraz</td>
<td>
<div id='service-up'></div>
</td>
</tr>
<tr>
<td>DCGS</td>
<td>http://jenkins.org/ernest_gleichner</td>
<td>
<div id='service-down'></div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
放：
$("#workstation-table").tablesorter();
在替换表的.load()调用的回调函数内。
相关文章：
- 弹出加载不起作用
- GULP中的Ctrl+S之后，实时重新加载不起作用
- 影子盒加载不起作用
- 余烬 CLI 实时重新加载不起作用
- 在Javascript中保存和加载不起作用
- 路由到新页面时加载不起作用
- IE11 脚本加载不起作用(有时）
- 砌体图像加载不起作用
- Jquery 移动加载不起作用
- 在javascript/jquery中加载不起作用
- jquery瀑布插件's等待图像加载不起作用
- 简单的Jquery/Ajax加载不起作用
- 代码点火器&AJAX-Div重新加载不起作用
- HTML加载不起作用
- 有什么原因吗('img')加载不起作用(jQuery)
- 弹出加载不起作用
- 图像加载不起作用，错误Uncaught TypeError:类型错误
- 窗口加载不起作用
- 加载不起作用，但鼠标悬停正常工作
- 在wordpress中，ajax加载不起作用
