jQuery tablesorter 插件 - 禁用标题内图像的排序

Question

我有一个使用 tablesorter 插件的大表（24 列），为了节省一些空间，我使用垂直图像在标题中显示标题。

我有一个点击事件附加到几个选定的图像，这将在被点击的标题标题旁边打开第二个表格（通过 jQuery 对话框）。我遇到的问题是，当我单击图像时，tablesorter 也在对列进行排序（我不希望发生这种情况）所以我试图找到一种方法以某种方式禁用排序，但只有在我点击标题图片。

任何帮助将不胜感激！

HTML 代码：

<table class="tablesorter" id="sales">
<thead>
 <tr>
  <th class="sales header" id="th_1"><img alt="" src="name.png" id="Name" onclick="openHeaderGeneric(this)"></th>
  <th class="sales header" id="th_2"><img alt="" src="date.png" id="Date" onclick="openHeaderGeneric(this)"></th>       
 </tr>
</thead>      
</table>

这里是 JS：

function openHeaderGeneric(element)
{   
// event triggered by clicking on img (title) not header (th)
var thId = $('#' + element.id).parent().attr('id');
var imageId = element.id;
var offset = $("th#" + thId).offset();
var top = offset.top;
var left = offset.left;
// get width of td cell (+8 for padding)
var tdWidth = thId.split('_');
tdWidth = tdWidth[1];
var width = $("td.col_" + tdWidth).width();
left = left + width + 8;

$.fx.speeds._default = 1000;

$("#" + imageId + "_wrapper").dialog( 
{
    autoOpen : false,
    show : "slide",
    hide : "slide",
    width : "auto",
    resizable : false,
    modal : false,
    position : [ left, top ]
});

if (!$("#" + imageId + "_wrapper").dialog("isOpen"))
{       
    $("#" + imageId + "_wrapper").dialog("open");
}
else if ($("#" + imageId + "_wrapper").dialog("isOpen"))
{       
    $("#" + imageId + "_wrapper").dialog("close");
}   

 } 

Answer 1

$('.header').unbind('click');

在定义点击事件之前添加它。或者，如果您只想对某些标头禁用它，请使用 ID：

$('#th_1').unbind('click');
$('#th_2').unbind('click');

或者，如果你想更聪明：

jQuery.each($('.header img'), function(i, elem) {
  if ($(elem).data('events') !== undefined && $(elem).data('events').click !== undefined) {
    $(elem).parent().unbind('click');
  }
});

我相信应该有效。