时间戳

首页 > 解决方案 > Bootstrap btn-group 下拉点击 dropdown-item

javascript - Bootstrap btn-group 下拉点击 dropdown-item

问题描述

我想单击btn-group并运行警报中的下拉项。

这是我的 HTML：

<td>
    <div class="btn-group" role="group">
        <button id="btnGroupVerticalDrop2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="padding: 0px;border: none;">
            <i class="flaticon-more-1"></i>
        </button>
        <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
            <li class="dropdown-item" href="#">Settings</li>
            <li class="dropdown-item" href="#">Print Preview</li>
            <li class="dropdown-item" id="link-report">Reports</li>
        </div>
    </div>
</td>

对于我的 jQuery

$('#table_test').on('click','.dropdown-item', function() {
    alert();
});

但是这段代码不起作用，你能告诉我我做错了什么吗？

标签： javascriptjquerytwitter-bootstrap

解决方案

请检查这是否有效

$('#table_test tr > td').on('click','.dropdown-item', function() {
    alert($(this).html());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table_test">
<tr>
  <td>
    <div class="btn-group" role="group">
        <button id="btnGroupVerticalDrop2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="padding: 0px;border: none;">
            <i class="flaticon-more-1"></i>
        </button>
        <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
            <li class="dropdown-item" href="#">Settings</li>
            <li class="dropdown-item" href="#">Print Preview</li>
            <li class="dropdown-item" id="link-report">Reports</li>
        </div>
    </div>
</td>
</tr>
<tr>
  <td>
    <div class="btn-group" role="group">
        <button id="btnGroupVerticalDrop2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="padding: 0px;border: none;">
            <i class="flaticon-more-1"></i>
        </button>
        <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
            <li class="dropdown-item" href="#">Settings 2</li>
            <li class="dropdown-item" href="#">Print Preview 2</li>
            <li class="dropdown-item" id="link-report">Reports 2</li>
        </div>
    </div>
</td>
</tr>
</table>

为了我

推荐阅读