Question

我有tab个dropdowns，其中一个是动态创建的。渲染后的代码。

<ul id="tabOp" class="nav nav-tabs">
<li class="" role="presentation"><a data-toggle="tab" href="#global" aria-expanded="false">Global</a></li>
<li id="liDropdownCentro" role="presentation" class="dropdown active">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#centro" aria-expanded="false">Centro
        <span class="caret"></span>
    </a>
    <ul id="dropdownCentroList" class="dropdown-menu"><li class="active"><a href="#ddc1" data-toggle="tab" aria-expanded="true">Option 1</a></li><li><a href="#ddc2" data-toggle="tab" aria-expanded="false">Option 2</a></li></ul>
</li>
<li id="liDropdownSupervisor" class="dropdown" role="presentation">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#supervisor" aria-expanded="false">Supervisor
        <span class="caret"></span>
    </a>
    <ul id="dropdownSupervisorList" class="dropdown-menu">
        <li class=""><a href="#1" data-toggle="tab" aria-expanded="false">Submenu 1-1</a></li>
        <li class=""><a href="#2" data-toggle="tab" aria-expanded="false">Submenu 1-2</a></li>                                
    </ul>
</li>

现在我想在用户从dropdowns选择一个选项时做出反应。

$('.dropdown-menu > li').on('click', function () {
    console.log($(this));        
});

硬编码的dropdown会做出反应，但是在飞行中创建的那个没有做出反应。我错过了什么？

Answer 1

问题是，由于您要动态添加元素，因此必须将click事件绑定到文档，因为文档准备就绪时添加的元素不存在尝试：

$(document).on('click','.dropdown-menu > li', function () {
    console.log($(this));        
});

Answer 2

.change()的JQuery功能是您想要调用的内容：

$('.dropdown-menu').change(()=>{
    console.log($(this));
})

只要更改下拉列表（例如：单击选项）

，就会调用此方法

您的解决方案不起作用的原因是因为在加载时，JQuery .on()函数应用于所有当前<li>元素，但.change()直接应用于父元素。

Answer 3

您可以将事件委托给 tabOp ，因为附加事件处理程序时子元素不存在。

在以下代码段中的示例：

＆＃13;

var strHTML = '    <li id="liDropdownSupervisor" class="dropdown" role="presentation">\
        <a class="dropdown-toggle" data-toggle="dropdown" href="#supervisor" aria-expanded="false">Supervisor\
        <span class="caret"></span>\
        </a>\
        <ul id="dropdownSupervisorList" class="dropdown-menu">\
        <li class=""><a href="#1" data-toggle="tab" aria-expanded="false">Submenu 1-1</a></li>\
<li class=""><a href="#2" data-toggle="tab" aria-expanded="false">Submenu 1-2</a></li>\
</ul>\
</li>\
';

$('#tabOp').on('click', '.dropdown-menu > li', function () {
    console.log(this.outerHTML);
});


//
// add item on the fly 
//
$('#tabOp').append(strHTML);

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<ul id="tabOp" class="nav nav-tabs">
    <li class="" role="presentation"><a data-toggle="tab" href="#global" aria-expanded="false">Global</a></li>
    <li id="liDropdownCentro" role="presentation" class="dropdown active">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#centro" aria-expanded="false">Centro
            <span class="caret"></span>
        </a>
        <ul id="dropdownCentroList" class="dropdown-menu">
            <li class="active"><a href="#ddc1" data-toggle="tab" aria-expanded="true">Option 1</a></li>
            <li><a href="#ddc2" data-toggle="tab" aria-expanded="false">Option 2</a></li>
        </ul>
    </li>
</ul>

＆＃13;

在动态创建时，Tw-Bootstrap Tab-Dropdown项目不可访问

3 个答案: