jQuery tablesorter Kind Elemente th deaktivieren Sortierung

Question

Ich habe Kind Elemente in th, die Popup-Fenster sind. Wenn ich auf .show_history div klicke, um das Popup div .show_history_ctn anzuzeigen, wird die Sortierung für diese Spalte ausgelöst. Ich habe den Z-Index für .show_history auf 9999 erhöht und noch Sortierung ausgelöst. Ich habe auch stopPropagation zu .show_history Click-Ereignis hinzugefügt und noch Sortierung auftritt.

jQuery

$(".show_history").on("click",function(event) { 
     $(this).siblings(".show_history_ctn").find("tr").show(); 
     event.stopPropagation(); 
     if($(this).hasClass("active")) { 
      $(this).siblings(".show_history_ctn").slideUp(); 
      $(this).removeClass("active"); 
     } else { 
      $(".show_history_ctn").hide(); 
      $(".show_history").removeClass("active"); 
      $(this).siblings(".show_history_ctn").slideDown(); 
      $(this).addClass("active"); 
     } 
    }); 

$(".tablesorter").tablesorter(); 

html

<table class='tablesorter'><thead><tr><th><div class='show_history'>Show History</div><div class='show_history_ctn' style='display:none'>**content**</div></th><th></th></tr></thead></table> 

Wie löse ich? Ich muss die Spalte sortieren, sonst würde ich einfach sorter:'false' hinzufügen.

Answer 1

Das Problem ist, dass die Klickbindung von tablesorter entfernt wird, da es den Tabellenheader neu erstellt. Sie können dieses Problem lösen Sie eine der folgenden Methoden verwenden:

• Stellen Sie die headerTemplate Option auf eine leere Zeichenfolge ("") - Dies verhindert, dass die Header-Inhalt zu verändern und damit keine Bindungen nicht bricht. Intern verwendet es eine innerHTML (diese wird wahrscheinlich bald geändert werden), um den Inhalt zu umhüllen, da jQuery's Umbruch in älteren Versionen von IE extrem langsam war.

• Bind den Popup-Links innerhalb des initialized Rückruf (demo)

  $(function() { 
  
      function bindLink() { 
      $('.link').click(function(e) { 
       e.preventDefault(); 
       e.stopPropagation(); 
      }); 
      } 
  
      $('table').tablesorter({ 
      theme: 'blue', 
      initialized: bindLink 
      }); 
  
  }); 
  

Update: Oops, ich vergaß die cssNoSort class name von "tablesorter-NOSORT" aufzunehmen, die Sie zu dem Element hinzugefügt werden muss Klicke auf. Demo-Link wurde oben aktualisiert.