Javascript 引导btn组下拉列表单击下拉列表项_Javascript_Jquery_Twitter Bootstrap

Javascript 引导btn组下拉列表单击下拉列表项

javascript jquery twitter-bootstrap

Javascript 引导btn组下拉列表单击下拉列表项,javascript,jquery,twitter-bootstrap,Javascript,Jquery,Twitter Bootstrap,我想单击btn组中的下拉项并运行警报这是我的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="fa

我想单击

btn组中的下拉项

并运行警报

这是我的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>

但是这段代码不起作用，你能告诉我这段代码有什么问题吗？

请检查这段代码是否起作用

$（'#table_test tr>td'）。在（'click'，'上。下拉项'，函数（）{
警报（$（this.html（））；
});

设置
打印预览
报告
设置2
打印预览2
报告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>


下拉菜单项单击模板
$（文档）.ready（函数（）{
$（“#表_测试”）。在（“单击”，“下拉项”，函数（）上）{
警报（“已单击下拉菜单项”）；
});
});  
你好，世界！
下拉列表
设置
打印预览
报告

为了简单起见，您可以在HTML文件中直接使用它。我已经在W3Schools.com TryIt编辑器中验证了这一点，它对我来说运行良好
如上所示，我将jQuery脚本放在
部分，并调用$（document.ready（）
中的.on（“单击”）
函数。这将确保id为table\u test
的表在DOM中可用，然后.on
事件将绑定到元素
让我知道这个答案是否适合你
问候,，
Aj
你确定你的表id是“table_test”吗？是的，我使用你的代码作为模板你的代码工作得很好-假设你真的有一个id为table_test
的包含元素（例如table
）。对不起，我刚刚缩短了代码，我有$（document）.ready（）；我认为@jishan siddique的答案更相关。。无论如何，谢谢你的帮助，这可能会帮助别人。当然，没问题。很高兴你找到了你想要的东西。为什么你认为让OP的$（“#table_test”）选择器变得更严格会解决任何问题？解释你的答案，让所有技能水平的未来访客都能从中学习。
<!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>