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

 <!DOCTYPE html>
<html>
<head>

 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script>
 $( document ).ready(function() {
 $("table.tablesorter tr th.header" ).click(function() {
     alert( "Handler for .click() called." );
   });
  });
 </script>
 </head>

<body>
<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 2

如果您使用ajax加载表格，我建议使用以下两种方法之一：

只更新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');
});

如果要替换整个表，只需重新初始化tablesorter。你的ajax看起来像这样：

var options = { /* add tablesorter options here */ };

$.ajax({
  url: url,
  data: data,
  success: function(data){
    $('#table-content').find('table').tablesorter(options);
  },
  dataType: dataType
});

Answer 3

您可以尝试此代码

   $( "table.tablesorter tr th.header" ).click(function() {
  alert( "Handler for .click() called." );
  });

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

3 个答案: