5

我有使用AJAXtable.tablesorter频繁更改的元素。我想在“点击”上添加事件处理程序，只要我点击它的标题，它就会委托给元素。我是新来使用 jQuery 的。因此，我尝试将以下 jQuery 脚本放入 Chrome Web 控制台。table.tablesorter th.class

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>

结果：当我单击表格上的标题时，没有弹出警报窗口。

当我单击表格的标题时，我必须更改什么以显示警报对话框？

4

3 回答 3

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>

于 2013-10-29T08:26:18.663 回答
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
});
于 2013-10-30T03:39:13.743 回答
0

你可以试试这个代码

   $( "table.tablesorter tr th.header" ).click(function() {
  alert( "Handler for .click() called." );
  });
于 2013-10-29T08:21:51.637 回答