2017-10-18 18 views
1

私は子要素をthのポップアップウィンドウに持っています。 .show_history divをクリックして、ポップアップdiv .show_history_ctnを表示すると、その列の並べ替えがトリガーされます。私は.show_historyのZ-インデックスを9999に上げていますが、まだソートがトリガーされています。また、stopPropagationを.show_history clickイベントに追加しても、ソートが発生します。jQuery tablesorter子要素th並べ替えを無効にする

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'を追加したいの列をソートする必要があります。

答えて

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> 
+0

デモを試みましたが、ポップアップリンクをクリックしても無視され、列がソートされました。 – mdnba50

+0

おっと、ごめんなさい...私は私の答えを更新しました。 – Mottie

関連する問題