jQuery tablesorter 하위 요소 th 정렬 비활성화

Question

팝업 창인 th에 하위 요소가 있습니다. .show_history div를 클릭하여 팝업 div .show_history_ctn을 표시하면 해당 열에 대한 정렬이 트리거됩니다. .show_history에 대한 Z- 색인을 9999로 늘렸고 정렬이 여전히 트리거되었습니다. 또한 stopPropagation을 .show_history click 이벤트에 추가했으며 여전히 정렬이 발생합니다.

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> 

내가 어떻게 해결합니까? 그렇지 않으면 그냥 sorter:'false'을 추가 할 것입니다.

Answer 1

문제는 클릭 바인딩이 테이블 헤더를 다시 작성하기 때문에 tablesorter에서 제거된다는 것입니다. 이 다음 방법 중 하나를 사용하여 해결할 수 있습니다 :

• 은 빈 문자열 ("")에 headerTemplate 옵션을 설정 -이 어떤 바인딩을 아프게하지 않는, 따라서 헤더 내용을 변경하고 방지 할 수 있습니다. 내부적으로 IE의 이전 버전에서는 jQuery의 줄 바꿈이 매우 느리기 때문에 innerHTML (곧 변경 될 예정입니다)을 사용하여 내용을 래핑합니다. initialized 콜백 (demo)

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

업데이트 내부의 팝업 링크 바인드

는 : 죄송합니다, 나는 요소 당신에 추가 할 필요가있다 "tablesorter에-NOSORT"의 cssNoSort class name을 포함하는 것을 잊었다 다시 클릭하십시오. 데모 링크가 위에 업데이트되었습니다.

<th>AlphaNumeric <a class="link tablesorter-noSort" href="https://google.com">test</a>