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 () {

通过此更改，无论何时创建它，下拉菜单类中的每个锚元素都可以使用单击处理程序。

Answer 2

当您使用AJAX调用下载内容时，您需要实现事件委派。好文章是here。

单击事件未在引导下拉列表项链接单击上执行

2 个答案: