JQueryのpreventDefaultが.onのクリックで機能しない

Question

私はクリックしたときにオブジェクトに関する情報を表示するデータの行を持っています。

しかし、私はクリックしたときに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> 

私が間違って何をしているのですか？あなたはe.stopImmediatePropigation()

jQueryのそれ自身のイベントシステムを使用しており、これは親からに委任要素上の任意の実行を停止しますを使用する必要がある子要素に委譲

Answer 1

。 e.stopPropigation()は、私たちはあなたのhtmlを参照することができ、同じ親から委任すべてのイベントが

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