javascript – 如何在Bootstrap下拉列表中选择元素,动态填充下拉列表

这是类似的
How to Display Selected Item in Bootstrap Button Dropdown Title

只有区别,我的下拉列表不是静态的,它是通过ajax响应填充的.
以下代码不适用于< li>动态填充的项目.

为了测试上面的内容,我有意把静态< li>当我点击该项目时,我可以在控制台中看到成功消息.但是,当我点击< li>这些都是动态附加的,我在控制台中没有任何东西.

我相信,我在这里遗漏了一些jQuery基础知识. jQuery gurus,评论/想法？

以下是一些进一步澄清的代码.

Java脚本代码：

在控制台中打印所选选项

$(".dropdown-menu li a").click(function () {
        console.log("Selected Option:"+$(this).text());
});

从ajax JSON响应中填充下拉列表

$.each(response,function (key,value) {
    $("#dropDownUL").append("<li> <a tabindex=\"-1\" href=\"#\" align=\"left\"> " + value + "</a> </li>");
})

HTML代码：

<div class="dropdown btn">
    <div id="dropDownId" class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#">
        Collections
        <b class="caret"></b>
    </div>           
    <ul id="dropDownUL"  class="dropdown-menu pull-left" role="menu" aria-labelledby="dLabel">
    <li><a tabindex="-1" href="#" align="left">Static test Option</a></li>
    </ul>


</div>

所以,再次,如果我点击静态测试选项,我可以在控制台中看到消息：选择选项：静态测试选项

但是,当我点击从ajax响应填充的Option2 Option 3时,我在控制台中看不到任何东西.

让我知道如果有什么不清楚.我会尝试进一步解释.

解决方法

$(document).on('click','.dropdown-menu li a',function () {
    console.log("Selected Option:"+$(this).text());
});

这只是简单的事件委托…在页面加载时不存在的元素必须将事件委托给在页面加载时确实存在的静态父元素.

我们利用jQuery的.on()来完成这个.

$(staticElement).on(event,dynamicElement,function(){ //etc });

义务编辑

请不要将元素实际绑定到$(document),而是选择最接近的是静态的父元素.这是出于性能原因.

原文地址：https://www.jb51.cc/js/152580.html