Javascript Tablesorter在加载后不起作用，即使它位于回调函数中
我有一个类似的问题，当时将tablesorter调用放在Javascript Tablesorter在加载后不起作用，即使它位于回调函数中,javascript,jquery,html,html-table,tablesorter,Javascript,Jquery,Html,Html Table,Tablesorter,我有一个类似的问题，当时将tablesorter调用放在.load（）回调中起作用，但现在，在我认为是不相关的更改之后，它转移到以前的行为：它最初排序，但在加载后单击列标题没有任何效果。感谢您的帮助 EDIT:当注释代码被注释掉时，tablesorter函数似乎可以工作，但当注释代码没有被注释掉时，tablesorter函数就不能工作，但我看不出注释代码为什么会影响未注释代码。为改变问题的范围而道歉 JS代码： $(document).ready(function() { var in
.load（）$(document).ready(function() {
var intervalId = window.setInterval(function(){
$('#status-tables').load('/dashboard/index #status-tables');
}, 5000);
//var clicks = true
//$("#application-name-label").animate({
// "color": "black"
//}, 1000);
//$("#refresh-5-sec").addClass("pressed-button")
//$("#refresh-button").on("click", function(event) {
// var buttonGroup = $(this).next();
//if(clicks) {
// $(buttonGroup).fadeOut(
// function() {
// $(this).parent().css('padding-right', '235px');
// $(this).parent().animate({
// paddingRight: "15"
// }, 300);
// clicks = false;
// });
// } else {
// $(buttonGroup).fadeIn();
// clicks = true;
// };
//});
$("#refresh-buttons").on("click", "button", function(event) {
var interval = 0;
switch(event.target.id) {
case "refresh-off" :
interval = 50000000;
$(this).parent().children().removeClass("pressed-button");
$(this).addClass("pressed-button");
break;
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").tablesorter(); });
}, interval);
}
});
$("#workstation-table").tablesorter();
});
您正在使用两个load（）方法，一个是重新初始化tablesorter，另一个不是。@A.Wolff这是问题的根源。如果你给我一个答复，我会接受的。感谢您指出本应清晰可见的内容：）。没关系，很高兴您解决了问题；）
<!DOCTYPE html>
<html>
<head>
<title>Webui</title>
<link data-turbolinks-track="true" href="/assets/application.css" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/application.js"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="YMkodi1Yy31wpZOA2dGdgbltM8M36Tiffo9PCMRlfsA=" name="csrf-token" />
</head>
<body>
<div class='whole-page'>
<div class='container'>
<h1 class='hero-unit' id='application-title'>
<div class='row-fluid'>
<div class='span1' id='replication-server'>
<img alt="Cog logo" src="/assets/cog_logo.png" />
<img alt="Crs" src="/assets/crs.png" />
Replication Server
<div class='span1 pull-right' id='refresh-label'>
<button class='btn' id='refresh-button'>Refresh Rate</button>
<div class='btn-group' id='refresh-buttons'>
<button class='btn btn-default' id='refresh-off'>Off</button>
<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>
</div>
</div>
</div>
</div>
</h1>
<h2>
<small id='application-name-label'>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>
<tbody></tbody>
<tr>
<td>
CIDNE
</td>
<td>
ullam
</td>
<td>
1,578,262
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
adipisci
</td>
<td>
5,828,812
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
ullam
</td>
<td>
2,970,946
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
quae
</td>
<td>
7,918,186
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
quae
</td>
<td>
6,331,230
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
vero
</td>
<td>
9,082,103
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
ullam
</td>
<td>
9,681,110
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
vero
</td>
<td>
5,572,147
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
quia
</td>
<td>
502,000
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
quae
</td>
<td>
6,517,368
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
vero
</td>
<td>
8,603,032
</td>
</tr>
<tr>
<td>
CIDNE
</td>
<td>
ullam
</td>
<td>
8,716,460
</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>
Reiciendis
</td>
<td>
3,286,731
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Sunt
</td>
<td>
3,269,134
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Reiciendis
</td>
<td>
6,720,385
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Reiciendis
</td>
<td>
4,965,628
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Dicta
</td>
<td>
4,318,889
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Reiciendis
</td>
<td>
1,060,083
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Sunt
</td>
<td>
7,625,906
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Reiciendis
</td>
<td>
2,863,118
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Dicta
</td>
<td>
1,294,952
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
Dicta
</td>
<td>
3,809,659
</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>
dignissimos
</td>
<td>
19,787
</td>
<td>
1,278,685
</td>
<td>
2013-09-01 07:59:58
</td>
</tr>
<tr>
<td>
sint
</td>
<td>
23,634
</td>
<td>
5,673,401
</td>
<td>
2013-09-15 12:43:55
</td>
</tr>
<tr>
<td>
magnam
</td>
<td>
31,465
</td>
<td>
4,094,304
</td>
<td>
2013-09-03 09:56:55
</td>
</tr>
<tr>
<td>
enim
</td>
<td>
36,566
</td>
<td>
4,579,378
</td>
<td>
2013-09-01 08:09:41
</td>
</tr>
<tr>
<td>
quos
</td>
<td>
28,638
</td>
<td>
5,486,033
</td>
<td>
2013-07-16 01:56:16
</td>
</tr>
<tr>
<td>
voluptatibus
</td>
<td>
15,129
</td>
<td>
2,612,705
</td>
<td>
2013-07-14 04:35:11
</td>
</tr>
<tr>
<td>
ullam
</td>
<td>
17,624
</td>
<td>
3,661,141
</td>
<td>
2013-07-10 10:33:42
</td>
</tr>
<tr>
<td>
et
</td>
<td>
52,962
</td>
<td>
3,951,956
</td>
<td>
2013-07-10 09:24:28
</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>
<td>
CIDNE
</td>
<td>
http://lang.com/jarrett_reynolds
</td>
<td>
<div id='service-down'></div>
</td>
</tr>
<tr>
<td>
DCGS
</td>
<td>
http://mraz.net/coy
</td>
<td>
<div id='service-up'></div>
</td>
</tr>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
.whole-page
.container
%h1#application-title.hero-unit
.row-fluid
.span1#replication-server
= image_tag "cog_logo.png"
= image_tag "crs.png"
Replication Server
.span1.pull-right#refresh-label
%button.btn#refresh-button Refresh Rate
.btn-group#refresh-buttons
%button.btn.btn-default#refresh-off Off
%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#application-name-label 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