javascript - 具有可选择行和下拉列表的数据表

Question

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

2) 每行最后一列内都包含一个 Bootstrap 下拉列表。

问题:

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

我的下拉代码:

<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');
})
    });

Answer 1

我还没有测试过，但你可以尝试一下，如下所示:

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