javascript - Bootstrap btn-group 下拉菜单单击 dropdown-item

Question

我想单击 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();
});

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

Answer 1

请检查它是否正常工作

$('#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>

对我来说