2016-02-24 73 views
0

當您單擊該行時,該表顯示詳細信息。問題是我有數量(減/加)鏈接在/減少輸入值。當我點擊鏈接時,我的表格顯示細節,我不想。我只想在點擊行而不是鏈接時顯示詳細信息。單擊事件時排除類元素

enter image description here

這裏是我的HTML:

<div class="table-responsive"> 
    <div id="detailedTable_wrapper" class="dataTables_wrapper form-inline no-footer"> 
     <table class="table table-hover table-condensed table-detailed dataTable no-footer" id="detailedTable" role="grid"> 
      <thead> 
       <tr role="row"> 
        <th class="sorting_disabled" rowspan="1" colspan="1"><?=_("Produits")?></th> 
        <th style="width:120px;" class="sorting_disabled" rowspan="1" colspan="1"></th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr role="row"> 
        <td class="v-align-middle semi-bold">Test</td> 
        <td class="v-align-middle text-right"> 
         <div class="input-group"> 
          <span class="input-group-addon primary"> 
           <a href="#" class="quantityMinus"><i class="fa fa-minus-circle"></i></a> 
          </span> 
          <input type="text" class="form-control text-center quantity" data-v-min="0" data-v-max="999" placeholder="0" autocomplete="false" style="width:50px;"> 
          <span class="input-group-addon primary"> 
           <a href="#" class="quantityPlus"><i class="fa fa-plus-circle"></i></a> 
          </span> 
         </div> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 

這裏是我的JS:

$('#detailedTable tbody').on('click', 'tr', function() { 
    //var row = $(this).parent() 
    if ($(this).hasClass('shown') && $(this).next().hasClass('row-details')) { 
     $(this).removeClass('shown'); 
     $(this).next().remove(); 
     return; 
    } 
    var tr = $(this).closest('tr'); 
    var row = table.DataTable().row(tr); 

    $(this).parents('tbody').find('.shown').removeClass('shown'); 
    $(this).parents('tbody').find('.row-details').remove(); 

    row.child(_format(row.data())).show(); 
    tr.addClass('shown'); 
    tr.next().addClass('row-details'); 
}); 

回答

0

爲了排除鏈接,你需要截取從哪裏clickevent對象它起源,然後使用它的target屬性找到attributes哪個最好定義VA如果你正在尋找比較和preventDefault行爲(如果它有任何類似的重定向等)。

$("#detailedTable tbody").delegate("tr", 'click',function(e) 
{ 
    if(e.target.className == "quantityMinus" || e.target.className == "quantityPlus") 
     e.preventDefault(); 
}); 

實施例:https://jsfiddle.net/DinoMyte/22zLa0qz/1/

相關問題