javascript - JQuery PreventDefault 不适用于 .on click

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>

我做错了什么？

Answer 1

当您委托(delegate)给子元素时，您需要使用e.stopImmediatePropigation()

Jquery 使用它自己的事件系统，这将停止对父级委托(delegate)的元素的任何执行。 e.stopPropigation() 将允许从同一父级委托(delegate)的所有事件触发

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