jquery - Bootstrap 下拉列表项链接单击时未执行单击事件

Question

我有多个下拉菜单(超过 10 个)，并且我的单击方法从未执行... 是否可以像我下面所做的那样为所有下拉元素定义相同的单击方法？

JS

<link rel="stylesheet" href="Scripts/bootstrap/css/bootstrap.min.css" />
<script src="Scripts/jquery-2.1.0.min.js"></script>
<script src="Scripts/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">

    $(document).ready(function () {

        $(".dropdown-menu li a").click(function () {

            console.log("inside"); //this never executes...

            var type = $(this).data("type");
            var nick = $(this).data("nickname");

            if (type == "1") {
                $('#chat_text').val('!tip ' + nick + ' ').focus();
            }
            else if (type == "2") {

            }
            else if (type == "3") {
                var val = $('#chat_text').val();
                $('#chat_text').val(val + nick ).focus();
            }
        });
    });
</script>

HTML

<li class="dropdown">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Test1</a>
   <ul class="dropdown-menu" role="menu"> 
   <li><a href="#" data-type="1" data-nickname="Test1">Tip</a></li> 
   <li><a href="#" data-type="2" data-nickname="Test1">Show</a></li> 
   <li><a href="#" data-type="3" data-nickname="Test1">Paste</a></li> 
   </ul> 
   <span>Some text</span>
</li>

<li class="dropdown">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Test2</a>
   <ul class="dropdown-menu" role="menu"> 
   <li><a href="#" data-type="1" data-nickname="Test2">Tip</a></li> 
   <li><a href="#" data-type="2" data-nickname="Test2">Show</a></li> 
   <li><a href="#" data-type="3" data-nickname="Test2">Paste</a></li> 
   </ul> 
   <span>Some text</span>
</li>

更多的下拉菜单是在真实代码中......

*编辑:我忘了提及，我在创建页面后动态添加这些下拉菜单(AJAX 调用......)

Answer 1

如果您动态添加它们，请尝试以下操作:

$("body").on('click', '.dropdown-menu li a', function () {

而不是

$(".dropdown-menu li a").click(function () {

通过此更改，下拉菜单类中的每个 anchor 元素都将出现点击处理程序，无论何时创建。