上一篇: jQuery UI可排序和Bootstrap 3流... 下一篇:jquery – 如何：Illustrator图形...

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

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了如何添加jQuery .on点击进入Tablesorter？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我有使用 AJAX频繁更改的table.tablesorter元素.我想在’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>

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

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

解决方法

如果您使用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
});