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>

对我来说

Answer 2

我在您的JavaScript代码中发现了错误。您需要在$(document).ready()中调用jQuery，因为表ID在DOM中尚不可用。这是完整的示例代码供您参考：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Dropdown Menu Item Click Template</title>

    <!-- Bootstrap -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#table_test").on("click", ".dropdown-item", function(){
                alert("The dropdown menu item was clicked.");
            });
        });  
    </script>

  </head>

  <body>
    <h1>Hello, world!</h1>
    <table id="table_test" class="table">
        <tbody>
            <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>Dropdown</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>
        </tbody>
    </table>



    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  </body>
</html>

为简单起见，您可以在HTML文件中直接使用它。我已经在W3Schools.com TryIt编辑器中对此进行了验证，它对我来说很好用。

如上所述，我已经将jQuery脚本放在<head>部分中，并且在.on("click")中调用了$(document).ready()函数。这将确保ID为table_test的表在DOM中可用，然后.on事件将绑定到该元素。

让我知道此答案是否对您有用。

关于， Aj

Bootstrap btn-group下拉菜单单击下拉菜单项

2 个答案: