jQuery Tablesorter-禁用的标题显示进度条，sortEnd从未触发

我将Tablesorter的“”函数和“”函数组合在一起，遇到了一个问题。下面的代码在大多数情况下都可以正常工作，但是：当您单击禁用的标题时，表示#overlay div的进度将出现，并且永远不会消失

<script type="text/javascript" id="js">
$(document).ready(function() {
  // call the tablesorter plugin, the magic happens in the markup
  $("#projectTable").tablesorter({ 
      // pass the headers argument and assing a object 
      headers: { 
          // assign the secound column (we start counting zero) 
          1: { 
              // disable it by setting the property sorter to false 
              sorter: false 
          }, 
          // assign the third column (we start counting zero) 
          2: { 
              // disable it by setting the property sorter to false 
              sorter: false
          } 
      } 
  });

  //assign the sortStart event
  $("#projectTable").bind("sortStart",function() {
      $("#overlay").show();
  }).bind("sortEnd",function() {
      $("#overlay").hide();
  });
}); </script>

$（文档）.ready（函数（）{
//调用tablesorter插件，神奇就发生在标记中
$（“#projectTable”）.tablesorter（{
//传递headers参数并分配对象
标题：{
//分配secound列（我们开始计算零）
1: { 
//通过将属性分类器设置为false来禁用它
分拣员：错
}, 
//分配第三列（我们开始计算零）
2: { 
//通过将属性分类器设置为false来禁用它
分拣员：错
} 
} 
});
//分配sortStart事件
$（“#projectTable”）.bind（“sortStart”，function（）{
$（“#覆盖”）.show（）；
}).bind（“sortEnd”，函数（）{
$（“#覆盖”）.hide（）；
});
}); 

有没有办法解决这个问题，这样在点击被禁用的标题时就不会发生任何事情？谢谢

编辑：

这是一个使用我对插件所做的一些修改的解决方案。插件的本质是你不知道点击了哪个标题（这对我来说很奇怪）。如果你愿意，我会发布我所做的更改

   // Works only with plugin modification
$("#projectTable").bind("sortStart",function(e) { 
    if( $(e.target).hasClass('header') ) {
        $("#overlay").show();
    }
}).bind("sortEnd",function(e) {
    if( $(e.target).hasClass('header') ) {
        $("#overlay").hide();
    }
});

---

编辑：

以下是我对插件所做的更改：

仅提供一点背景信息，

sortStart

和

sortEnd

是绑定到表的自定义事件。在插件中，

click

事件绑定到标题，这反过来会触发表上的

sortStart

自定义事件。因此，回调中没有对接收到单击的实际元素的引用

在标题的相同单击事件中，

sortEnd

只需稍微向下触发

我不知道作者为什么这样做，但我也不知道作者为什么用“header”这样的常用词来表示header元素。那只是自找麻烦

不管怎样，这里是修复方法。我将给出插件最新未统一版本的行号

---

步骤1： 在第520行附近，您将看到为标题设置单击的代码：

// apply event handling to headers
// this is to big, perhaps break it out?
$headers.click(function(e) {

    $this.trigger("sortStart");

…将其更改为：

// apply event handling to headers
// this is to big, perhaps break it out?
$headers.click(function(e) {

    $(e.target).trigger("sortStart"); // e.target refers to the clicked element.
                                      // The event will bubble up to the table, 
                                      //    and fire.

setTimeout(function() {
    //set css for headers
    setHeadersCss($this[0],$headers,config.sortList,sortCSS);

      // Passes the element clicked to appendToTable() ------------------v
    appendToTable($this[0],multisort($this[0],config.sortList,cache), e.target);
},1);

---

步骤2： 然后沿着第578行再往下一点，您将看到以下代码：

setTimeout(function() {
    //set css for headers
    setHeadersCss($this[0],$headers,config.sortList,sortCSS);
    appendToTable($this[0],multisort($this[0],config.sortList,cache);
},1);

…将其更改为：

// apply event handling to headers
// this is to big, perhaps break it out?
$headers.click(function(e) {

    $(e.target).trigger("sortStart"); // e.target refers to the clicked element.
                                      // The event will bubble up to the table, 
                                      //    and fire.

setTimeout(function() {
    //set css for headers
    setHeadersCss($this[0],$headers,config.sortList,sortCSS);

      // Passes the element clicked to appendToTable() ------------------v
    appendToTable($this[0],multisort($this[0],config.sortList,cache), e.target);
},1);

---

步骤3： 然后转到第243行附近的

appendToTable（）

函数，您将看到：

function appendToTable(table,cache) {

…将其更改为：

  // Receives element we passed --------v
function appendToTable(table,cache,theHeader) {

setTimeout(function() {
       // Triggers the sortEnd event on the element we passed in
    $(theHeader).trigger("sortEnd");    
},0);

---

步骤4： 最后，在相同的

appendToTable（）

函数中，在第285行附近，您将看到以下内容：

setTimeout(function() {
    $(table).trigger("sortEnd");    
},0);

…将其更改为：

  // Receives element we passed --------v
function appendToTable(table,cache,theHeader) {

setTimeout(function() {
       // Triggers the sortEnd event on the element we passed in
    $(theHeader).trigger("sortEnd");    
},0);

---

---

同样，我不知道是否会有任何副作用。不过我有点怀疑。试一试，让我知道结果如何。

一种更简单的方法。搜索这些行

$headers.click(function(e) {
$this.trigger("sortStart");
var totalRows = ($this[0].tBodies[0] && $this[0].tBodies[0].rows.length) || 0;

把它改成这个

$headers.click(function(e) {
$this.trigger("sortStart");
//Triggers SortEnd if header disabled
if(this.sortDisabled){ $(this).trigger("sortEnd"); }
var totalRows = ($this[0].tBodies[0] && $this[0].tBodies[0].rows.length) || 0;

---

谢谢你，帕特里克！不幸的是，这两个选项都关闭了#覆盖，因此它永远不会显示，即使它应该显示。@McGirl-标题有没有可能有任何子元素？@McGirl-我一直在修补tablesorter，而我在处理事件对象时遇到了麻烦。深入挖掘…@McGirl-好吧，我让它工作了，但只是在对插件做了一些修改，将点击的标题传递到自定义事件（sortStart和sortEnd）的回调中之后。如果你想使用修改版的tablesorter，我很乐意向你展示我所做的更改。我很想看到插件的更改-谢谢你花这么多时间在这上面！令人惊讶的是，这个插件和这个伪bug一起存在了这么长时间。我相信很多人都会感激你的更新，我在网上发现其他人也有同样的问题，但没有解决办法。