如何添加jQuery .on点击进入Tablesorter？

Question

我有table.tablesorter使用AJAX经常更改的元素.我想在'click'上添加事件处理程序,table.tablesorter th.class每当我点击它的标题时,它将委托给元素.我是使用jQuery的新手.因此,我尝试将以下jQuery脚本放入Chrome Web Console.

jQuery脚本:

$('#table-content').on(
    'click', 
    '.tablesorter thead tr th', 
    function() {alert(); }
);

我的HTML:

<div id="table-content">
    <table class="tablesorter">
        <thead>
            <tr>
                <th class="header">No.</th>
                <th class="header">Name</th>
                <th class="header">Phone</th>
            </tr>
        </thead>
    </table>
</div>

结果:当我单击表格上的标题时,没有警报弹出窗口.

单击表格标题时,我必须更改显示警告对话框的内容？

Answer 1

如果您使用 ajax 加载表，我会推荐以下两种方法之一：

1. 仅更新 tbody 内的行，除非标题单元格被完全替换，否则您无需担心处理标题点击。

   如果您将表存储为完整表，则可以遵循其他选项（建议#2），或者将表加载到临时容器中，然后传输 tbody 并更新表。

   var $table = $('#table-content').find('table');
   $('#hidden-div').load( "ajax.html", function() {
      // remove old tbody
      $table.find('tbody').remove();
      // move new tbody into the initialized tablesorter table
      $('#hidden-div').find('table tbody').appendTo( $table );
      // update tablesorter's cache
      $table.trigger('update');
   });
   

2. 如果整个表都被替换，只需重新初始化tablesorter即可。你的 ajax 看起来像这样：

   var options = { /* add tablesorter options here */ };
   
   $.ajax({
     url: url,
     data: data,
     success: function(data){
       $('#table-content').find('table').tablesorter(options);
     },
     dataType: dataType
   });