2016-12-01 51 views
1

我有一行數據,點擊時會顯示有關對象的信息。JQuery preventDefault無法使用.on單擊

但我也有一個按鈕的行,點擊時執行一些jquery wizzardry。

無論如何,我似乎無法阻止行點擊,只是消滅按鈕的東西。

我已經試過:

return false; 
e.preventDefault(); 
e.stopPropagation(); 

這是函數。

$('#check_container').on('click', '.show_sub_orgs', function(e) { 

    e.preventDefault(); 

    e.stopPropagation(); 

    return false; 

我現在有3個在那裏,但這只是例如。儘管我已經嘗試了所有3個,但我也分別嘗試過每一個。

繼承人的HTML

<div class="row" id="check_container"> 
    <div id='table_holder' class="col-md-12" >  
     <table id="org_table" class="sortable table table-striped tablesorter"> 
       <?php 
        if(empty($org_data2)) { 
         // if there is no data for the selected filter 
         echo "There are no organisations set up."; 
        } else { 
         echo "  
          <thead> 
           <tr> 
            <th></th> 
            <th>Name</th> 
            <th>Sub Orgs</th> 
            <th>Locations</th> 
            <th>Users</th> 
            <th>Compliance</th> 
            <th>O/D Checks</th> 
            <th>O/D Training</th> 
            <th>Renewal</th> 
            <th>Actions</th> 
           </tr> 
          </thead> 
          <tbody> 
         "; 
         foreach ($org_data2 as $orgs) { 
          if(!$orgs->descendant) { 
           echo "<tr id='" . $orgs->org_id . "' class='edit_org_row clickable'>"; 
           echo "<td>" . (($orgs->ancestor)?'<div id="' . $orgs->org_id . '" class="show_sub_orgs btn btn-primary btn-xs" data-toggle="tooltip" title="Show Sub-Orgs"><i class="fa fa-expand" aria-hidden="true"></i></div>':'') . "</td>"; 
           echo "<td data-title='Name'>" . $orgs->org_name . "</td>"; 
           echo "<td data-title='Sub Orgs' class='text-center'></td>"; 
           echo "<td data-title='Locations' class='text-center'>" . $orgs->locations . "</td>"; 
           echo "<td data-title='Users' class='text-center'>" . $orgs->users . "</td>"; 
           echo "<td data-title='Compliance' class='text-center'></td>"; 
           echo "<td data-title='O/D Checks' class='text-center'>" . $orgs->checks . "</td>"; 
           echo "<td data-title='O/D Training' class='text-center'>" . $orgs->training . "</td>"; 
           echo "<td data-title='Renewal'>" . date("d/m/Y", strtotime($orgs->renewal_date)) . "</td>"; 
           echo "<td data-title='Actions'><div data-id='3' id='" . $orgs->org_id . "' class='btn admin_login btn-success btn-sm' data-toggle='tooltip' title='Login as customer'>Login</div><div data-id='2' id='" . $orgs->org_id . "' class='btn btn-danger btn-sm' data-toggle='tooltip' title='Disable customer'>Disable</div></td>"; 
           echo "</tr>"; 
          } 
         } 
        } 
       ?> 
      </tbody> 
     </table>     
    </div>   
</div> 

我在做什麼錯?

+0

我們可以看到你的HTML嗎? – hairmot

+0

奇怪的是,使用'e.stopPropagation()'完全適合我這個html http://codepen.io/jb06/pen/eBygJo – JB06

+0

mmmm,有些奇怪的事情正在發生! – frobak

回答

1

當你委託給你需要使用e.stopImmediatePropigation()

jQuery使用它自己的事件系統,這將停止從父委託給元素的任何執行的子元素。 e.stopPropigation()將允許來自同一個父委託的所有事件火災

$('#check_container').on('click', '.show_sub_orgs', function(e) { 
 
    e.preventDefault(); 
 
    e.stopImmediatePropagation(); 
 
})

+0

我真的很有信心,這將工作。但它沒有?!我已經添加了上面的html以獲得更多的清晰度 – frobak