具有可选行和下拉菜单的数据表答案

【问题标题】：Datatables with selectable rows and a dropdown具有可选行和下拉菜单的数据表
【发布时间】：2015-12-02 23:23:36
【问题描述】：

1) 在我当前的项目中，我使用带有可选行的数据表（单击以突出显示/选择一行）。

2) 每行在最后一列中包含一个引导下拉菜单。

问题：

当我单击该行时，该行被选中，这很好。但是当我点击下拉菜单时，该行也被选中。我不想要那个。我怎么能做到这一点？！当我点击最后一列的下拉菜单时，有什么方法可以防止该行被选中？

我的下拉代码：

<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Aktion <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">OptionA</a></li>
        <li><a href="#">OptionB</a></li>
        <li><a href="#">OptionC</a></li>
    </ul>
</div>

我的数据表代码：

$('#invoiceList').dataTable({
    "displayLength": -1,
    "paginate": true,
    "order": [[3, "desc"]],
    "lengthMenu": [[5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "Alle"]],
    "ajax": "get_invoices.php",
    "deferRender": true
});

$('#invoiceList tbody').on('click', 'tr', function () {
    $(this).toggleClass('active');
})
    });

【问题讨论】：

标签： javascript jquery twitter-bootstrap datatables

【解决方案1】：

我没有测试过，但是你可以试试，像这样：

$('.dropdown-menu').click(function(e)) {
    e.preventDefault(); //or e.stopPropagation(); which should work better
});

【讨论】：

谢谢，已经想到了这样的事情，但是（preventDefault & stopPropagation）都不会停止被选中的行：/

【解决方案2】：

我找到了解决方案。通过使用事件委托，我收到有关 ajax 加载下拉列表的单击事件的通知。然后我可以从表中的所有行中删除活动类。

$(document).on("click", '.dropdown-toggle', function(event) { 
            console.log('clicked dropdown');
            $('#invoiceList tbody tr').removeClass('active');
        });

【讨论】：