2016-02-24 138 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/

相关问题