将点击事件添加到TH伪元素，从TH获取数据属性，防止点击时触发TH事件

我正在创建一个HTML表，该表当前在列标题TH上附加了一个点击事件来对表进行排序。

我现在要做的是通过在单击"某处"时显示其他隐藏列来展开列。现在，我对这个"某处"的最初想法是在每个具有隐藏列（它们都有一个特定的css类）的TH上创建一个:pseudo元素，并将show事件附加到这个:pseudo元素上，然而，当我这样做时，它会触发列排序。

我曾尝试将$('.xxp').on('click', function () {更改为$('.xxp:before').on('click', function () {，但由于TH具有我需要的数据属性，当我使用$(this).parent('th')时，我无法获取数据，因此扩展不会启动。。。。你能瞄准伪元素的父元素吗？

因此，在这个片段中，我想点击绿色来对表进行排序，我想单击红色来显示隐藏的列，但不同时触发排序（目前是这样）。

$(document).ready(function () {
            var openData = null;
            $('.xxp').on('click', function () {
                var $this = $(this),
                    colData = $this.data('col'),
                    openItem = $('.xx_' + colData + 'c'),
                    xplodeCols = $("td[class^='xx_'], th[class^='xx_']"),
                    moreInfoCols = $('.xMI_');
                //reset the columns
                xplodeCols.hide();
                //check if we are closing the current col
                if (openData == colData) {
                    //do something??
                    openData = null
                    moreInfoCols.show();
                }
                else {
                    openData = colData;
                    moreInfoCols.hide();
                    openItem.show();
                }
            });
        });
  //this is a dummy function for testing - 
  //I want the above code to run, but not this.
$('.xxp').on('click', function () {
 //   alert('Ooops! I did not want this event to fire!');
});

table td, table th {border:1px solid #ccc; width:30px}   
td[class^='xx_'], th[class^='xx_'] {
        display: none;
    }
.xxp {background: #00ff00 !important;}
    th[class^='xx_'] {
        background: #ccc !important;
    }
    .xxp:before {
        display:inline-block;
        width:15px;
        height:15px;
        content:"";
        background-color:#ff0000;
        float:right;
        position:absolute;
        margin-top:-20px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<br />
<table class="rpt">
  <tbody>
    <tr>
      <th>No</th>
      <th title="G" class="xxp" data-col="0">G</th>
      <th title="G" class="xx_0c">.1</th>
      <th title="G" class="xx_0c">.2</th>
      <th title="G" class="xx_0c">.3</th>
      <th title="G" class="xx_0c">.4</th>
      <th title="G" class="xx_0c">.5</th>
      <th title="G" class="xx_0c">.6</th>
      <th title="G" class="xx_0c">.7</th>
      <th title="G" class="xx_0c">.8</th>
      <th title="G" class="xx_0c">.9</th>
      <th title="F" class="xxp" data-col="1">F</th>
      <th title="F" class="xx_1c">.1</th>
      <th title="F" class="xx_1c">.2</th>
      <th title="F" class="xx_1c">.3</th>
      <th title="F" class="xx_1c">.4</th>
      <th title="F" class="xx_1c">.5</th>
      <th title="F" class="xx_1c">.6</th>
      <th title="F" class="xx_1c">.7</th>
      <th title="F" class="xx_1c">.8</th>
      <th title="F" class="xx_1c">.9</th>
    </tr>
    <tr>
      <td>0</td>
      <td> 1</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">1</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td> 3</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">2</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">1</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
    </tr>
    <tr>
      <td>0</td>
      <td>0 </td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td>0 </td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
    </tr>
    <tr>
      <td>0</td>
      <td>0 </td>
      <td class="xx_0c"></td>
      <td class="xx_0c"></td>
      <td class="xx_0c"></td>
      <td class="xx_0c"></td>
      <td class="xx_0c"></td>
      <td class="xx_0c"></td>
      <td class="xx_0c"></td>
      <td class="xx_0c"></td>
      <td class="xx_0c"></td>
      <td>0 </td>
      <td class="xx_1c"></td>
      <td class="xx_1c"></td>
      <td class="xx_1c"></td>
      <td class="xx_1c"></td>
      <td class="xx_1c"></td>
      <td class="xx_1c"></td>
      <td class="xx_1c"></td>
      <td class="xx_1c"></td>
      <td class="xx_1c"></td>
    </tr>
    <tr>
      <td>0</td>
      <td> 1</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">1</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td class="xx_0c">&nbsp;</td>
      <td>2</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">2</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
      <td class="xx_1c">&nbsp;</td>
    </tr>
  </tbody>
</table>

这是一把小提琴：http://jsfiddle.net/wf_4/qkv510ot/