Javascript操作表格数据排序问题（SortTable排序问题，大虾们过来看看吧）

小弟最近写的一个程序用ajax进行查询，可是数据加载完成后用SortTable无论如何都不能排序。因为字数限制，Sorttable.js 的源码无法上传，下载地址在下面，大小为17K ：
<!-- ******************  SortTable.js Source Code   ********************* -->/*
  SortTable
  version 2
  7th April 2007
  Stuart Langridge, http://www.kryogenix.org/code/browser/sorttable/
  
  Instructions:
  Download this file
  Add <script src="sorttable.js"></script> to your HTML
  Add class="sortable" to any table you'd like to make sortable
  Click on the headers to sort
  
  Thanks to many, many people for contributions and suggestions.
  Licenced as X11: http://www.kryogenix.org/code/browser/licence.html
  This basically means: do what you want with it.
*/<!-- **************************end of SortTable Source Code************************ --><!-- ***************************sortTest.html************************************* -->
<script type="text/javascript" src="sorttable.js"></script>
<html>
<head>
<title>SortTable Test!
</title>
</head>
<body>
<table width="100%"  align="center" border="1" cellspacing="0" cellpadding="0" style="border-collapse:collapse; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#8000FF" class="sortable">
  <tr>
    <td width="21%" height="24" align="center" bgcolor="#FF80FF">ID</td>
    <td width="28%" align="center" bgcolor="#FF80FF">NAME</td>
    <td width="17%" align="center" bgcolor="#FF80FF">AGE</td>
    <td width="17%" align="center" bgcolor="#FF80FF">SEX</td>
    <td width="17%" align="center" bgcolor="#FF80FF">PHONE</td>
  </tr>
  <tr>
    <td height="22" align="center">1</td>
    <td align="center">JIM</td>
    <td align="center">18</td>
    <td align="center">BOY</td>
    <td align="center">010-1120999</td>
  </tr>
  <tr>
    <td height="22" align="center">2</td>
    <td align="center">CAT</td>
    <td align="center">22</td>
    <td align="center">GIRL</td>
    <td align="center">0532-8833223</td>
  </tr>
  <tr>
    <td height="22" align="center">3</td>
    <td align="center">TOM</td>
    <td align="center">19</td>
    <td align="center">BOY</td>
    <td align="center">0631-8988833</td>
  </tr>
  <tr>
    <td height="22" align="center">4</td>
    <td align="center">HANS</td>
    <td align="center">23</td>
    <td align="center">BOY</td>
    <td align="center">0418-9930003</td>
  </tr>
</table>
<div id="content"><input name="btnLoadData" type="button" id="btnLoadData"   onclick="Javascript:LoadData();" value="LoadData" width="100" />
  
</div>
<div id="list">
</div>
</body>
<!-- Test SortTable! -->
<script language="javascript">
function $(ID)
{
return document.getElementById(ID);
}

function LoadData()
{
var list= $("list");
var html="<table width=\"100%\"  align=\"center\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\" style=\"border-collapse:collapse; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#8000FF\" class=\"sortable\">";
//add table header
html+="<tr><td width=\"21%\" height=\"24\" align=\"center\" bgcolor=\"#00FFEE\">ID</td>";
    html+="<td width=\"28%\" align=\"center\" bgcolor=\"#00FFEE\">NAME</td>";
    html+="<td width=\"17%\" align=\"center\" bgcolor=\"#00FFEE\">AGE</td>";
    html+="<td width=\"17%\" align=\"center\" bgcolor=\"#00FFEE\">SEX</td>";
    html+="<td width=\"17%\" align=\"center\" bgcolor=\"#00FFEE\">PHONE</td></tr>";
//add table body 

html+="<tr><td width=\"21%\" height=\"22\" align=\"center\" >1</td>"; //first row
    html+="<td width=\"28%\" align=\"center\" >Jim</td>";
    html+="<td width=\"17%\" align=\"center\" >18</td>";
    html+="<td width=\"17%\" align=\"center\" >boy</td>";
    html+="<td width=\"17%\" align=\"center\" >010-1120999</td></tr>";

html+="<tr><td width=\"21%\" height=\"22\" align=\"center\" >2</td>"; //second row
    html+="<td width=\"28%\" align=\"center\" >Cat</td>";
    html+="<td width=\"17%\" align=\"center\" >22</td>";
    html+="<td width=\"17%\" align=\"center\" >Girl</td>";
    html+="<td width=\"17%\" align=\"center\" >0532-8833223</td></tr>";


html+="<tr><td width=\"21%\" height=\"22\" align=\"center\" >3</td>"; //third row
    html+="<td width=\"28%\" align=\"center\" >Tom</td>";
    html+="<td width=\"17%\" align=\"center\" >19</td>";
    html+="<td width=\"17%\" align=\"center\" >boy</td>";
    html+="<td width=\"17%\" align=\"center\" >0631-8988833</td></tr>";

html+="<tr><td width=\"21%\" height=\"22\" align=\"center\" >4</td>"; //fourth row
    html+="<td width=\"28%\" align=\"center\" >Hans</td>";
    html+="<td width=\"17%\" align=\"center\" >23</td>";
    html+="<td width=\"17%\" align=\"center\" >Boy</td>";
    html+="<td width=\"17%\" align=\"center\" >0418-9930003</td></tr>";

html+="</table>";

list.innerHTML=html;
}</script></html><!-- ******************************end of sortTest.html********************************* -->对于页面已经存在的数据，点击表头可以进行排序。如果我使用LoadData()函数动态加载数据时就出现了问题：
如果在body onload 中进行加载数据时，表格可以进行数据排序，但是我使用按钮的单击手动加载数据时表格就不能实现数据的排序。请大虾们帮我看看问题出在哪里。

解决方案 »

  1.   

    没有用过sorttable。不过以我使用其他JS框架的经验来看！所有动态生成的页面元素一般都不知动态绑定事件和动态选择！例如Jquery对所有按钮绑定onclick，$(":button").bind("click",func)
    进行操作后，后面动态生成的按钮并没有帮地该事件。
    但JQuery提供了live支持动态绑定。$(":button").live("click",func)
    后面动态添加的按钮也会绑定func函数。我觉得你手动后面添加的表格没有绑定排序事件！你可以查下sorttable的API手册，或者源码找一下排序事件，手动绑定在后面添加的表格上。