Bootstrap btn-group dropdown click dropdown-item

Question

I want to click the dropdown item inside the btn-group and run alert.我想单击btn-group内的下拉项并运行警报。

This is my HTML:这是我的 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>

For my jQuery对于我的 jQuery

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

But this code is not working, can you tell me what I am doing wrong with this?但是这段代码不起作用，你能告诉我我做错了什么吗？

Answer 1

Please check this is working请检查这是否有效

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

for me为了我

Answer 2

I found the error in your JavaScript Code.我在您的 JavaScript 代码中发现了错误。 You need to call the jQuery in the $(document).ready() as the table id is not yet available in the DOM.您需要在$(document).ready()调用 jQuery，因为表 id 在 DOM 中尚不可用。 Here is a complete sample code for your reference:这是一个完整的示例代码供您参考：

<!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>

You can directly use this in your HTML file for simplicity.为简单起见，您可以直接在 HTML 文件中使用它。 I have verified this in the W3Schools.com TryIt Editor and it's working fine for me.我已经在 W3Schools.com TryIt 编辑器中验证了这一点，它对我来说很好用。

As you can see above, I have put the jQuery script in the <head> section and I am calling the .on("click") function in the $(document).ready() .正如你在上面看到的，我已经把 jQuery 脚本放在<head>部分，我正在调用$(document).ready()的.on("click")函数。 This will ensure that the table with id table_test is available in the DOM and then the .on event will be bound to the element.这将确保具有 id table_test的表在 DOM 中可用，然后.on事件将绑定到元素。

Let me know if this answer works for you.让我知道这个答案是否适合你。

Regards, Aj问候， Aj

Bootstrap btn-group dropdown click dropdown-item

问题描述

2 个解决方案

解决方案1
1 2019-12-10 08:20:48

解决方案2
0 2019-12-10 09:05:40

Bootstrap btn-group dropdown click dropdown-item

问题描述

2 个解决方案

解决方案1 1 2019-12-10 08:20:48

解决方案2 0 2019-12-10 09:05:40

解决方案1
1 2019-12-10 08:20:48

解决方案2
0 2019-12-10 09:05:40