全部，
我正在尝试让 JQueryUI 工具提示和 Tablesorter 插件一起工作。当我将鼠标悬停在名称上时，无法显示 JQueryUI 工具提示，但在单击“重置排序顺序”链接后，该工具提示不会出现。
如何确保在单击“重置排序顺序”链接后显示工具提示。当表格排序或分页时，还应该显示工具提示。
可以在以下位置查看代码演示:http://jsbin.com/asaxi3/32/
代码在这里:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>jQuery plugin: Tablesorter 2.0 - Pager plugin</title>
<link rel="stylesheet" href="css/jq.css" type="text/css" media="print, projection, screen" />
<link rel="stylesheet" href="http://tablesorter.com/themes/blue/style.css" type="text/css" media="print, projection, screen" />
<link rel="stylesheet" type="text/css" href="http://jquery.bassistance.de/tooltip/jquery.tooltip.css">
<script type="text/javascript" src="http://tablesorter.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://tablesorter.com/jquery.tablesorter.js"></script>
<script type="text/javascript" src="http://tablesorter.com/addons/pager/jquery.tablesorter.pager.js"></script>
<script type="text/javascript" src="http://jquery.bassistance.de/tooltip/jquery.tooltip.js"></script>
</head>
<body>
<div id="main">
<table id="table1" cellspacing="1" class="tablesorter">
<thead>
<tr>
<th>Name</th>
<th>Major</th>
<th>Sex</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#" title="I am Student01">Student01</a></td>
<td>Languages</td>
<td>male</td>
</tr>
<tr>
<td><a href="#" title="I am Student02">Student02</a></td>
<td>Mathematics</td>
<td>male</td>
</tr>
<tr>
<td><a href="#" title="I am Student03">Student03</a></td>
<td>Languages</td>
<td>female</td>
</tr>
<tr>
<td><a href="#" title="I am Student04">Student04</a></td>
<td>Languages</td>
<td>male</td>
</tr>
<tr>
<td><a href="#" title="I am Student05">Student05</a></td>
<td>Languages</td>
<td>female</td>
</tr>
<tr>
<td><a href="#" title="I am Student06">Student06</a></td>
<td>Mathematics</td>
<td>male</td>
</tr>
<tr>
<td>Student07</td>
<td>Mathematics</td>
<td>male</td>
</tr>
<tr>
<td>Student08</td>
<td>Languages</td>
<td>male</td>
</tr>
<tr>
<td>Student09</td>
<td>Mathematics</td>
<td>male</td>
</tr>
<tr>
<td>Student10</td>
<td>Languages</td>
<td>male</td>
</tr>
<tr>
<td>Student11</td>
<td>Languages</td>
<td>male</td>
</tr>
<tr>
<td>Student12</td>
<td>Mathematics</td>
<td>female</td>
</tr>
<tr>
<td>Student13</td>
<td>Languages</td>
<td>female</td>
</tr>
<tr>
<td>Student14</td>
<td>Languages</td>
<td>female</td>
</tr>
<tr>
<td><a href="#" title="I am Student15">Student15</a></td>
<td>Languages</td>
<td>male</td>
</tr>
<tr>
<td>Student16</td>
<td>Languages</td>
<td>female</td>
</tr>
<tr>
<td><a href="#" title="I am Student17">Student17</a></td>
<td>Languages</td>
<td>female</td>
</tr>
<tr>
<td><a href="#" title="I am Student18">Student18</a></td>
<td>Mathematics</td>
<td>male</td>
</tr>
<tr>
<td>Student19</td>
<td>Languages</td>
<td>male</td>
</tr>
<tr>
<td>Student20</td>
<td>Mathematics</td>
<td>male</td>
</tr>
<tr>
<td>Student21</td>
<td>Languages</td>
<td>male</td>
</tr>
<tr>
<td>Student22</td>
<td>Mathematics</td>
<td>male</td>
</tr>
<tr>
<td>Student23</td>
<td>Languages</td>
<td>female</td>
</tr>
</tbody>
</table>
<div id="pager1" class="pager">
<form>
<a href="javascript:resetTableOrder(tablebackup)">Reset Sort Order</a>
<img src="http://tablesorter.com/addons/pager/icons/first.png" class="first"/>
<img src="http://tablesorter.com/addons/pager/icons/prev.png" class="prev"/>
<input type="text" class="pagedisplay"/>
<img src="http://tablesorter.com/addons/pager/icons/next.png" class="next"/>
<img src="http://tablesorter.com/addons/pager/icons/last.png" class="last"/>
<select class="pagesize">
<option selected="selected" value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
</form>
</div>
<script type="text/javascript">
$(function() {
$("#table1 a").tooltip({
showURL: false,
fixPNG: true,
track:true,
delay:0
});
tablebackup = $("#table1").clone();
$("#table1")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager1")});
});
function resetTableOrder(tablebackup) {
tablebackup.clone().insertAfter("#table1");
$("#table1").remove();
$("#table1")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager1")});
//Load Tool Tips for links inside the tab container
$("#table1 a").tooltip({
showURL: false,
fixPNG: true,
track:true,
delay:0
});
}
</script>
</div>
</body>
</html>
谢谢
最佳答案
当您第一次初始化工具提示时，它从标签中删除了标题属性。然后，当刷新表时，它无法找到每个链接的标题标签，因此会跳过它。我建议缓存标题标签，这样当您重新初始化工具提示时，您可以重新插入原始标题标签。
var tableTitles;
$(function() {
tableTitles = $("#table1 a").attr("title");
$("#table1 a").tooltip({
showURL: false,
fixPNG: true,
track:true,
delay:0
});
tablebackup = $("#table1").clone();
$("#table1")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager1")});
});
function resetTableOrder(tablebackup) {
tablebackup.clone().insertAfter("#table1");
$("#table1").remove();
$("#table1")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager1")});
//Load Tool Tips for links inside the tab container
$("#table1 a").attr("title", tableTitles).tooltip({
showURL: false,
fixPNG: true,
track:true,
delay:0
});
}
这是工作版本:http://jsbin.com/asaxi3/36
关于javascript - 表重置后显示 JQuery UI 工具提示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3119237/