Javascript 如何在引导下拉列表中获取所选元素，其中下拉列表是动态填充的

这类似于

唯一不同的是，我的下拉列表不是静态的，它是通过ajax响应填充的。 下面的代码不仅适用于动态填充的项目

为了测试上面的内容，我特意放置了一个静态的

，当我点击该项时，我可以在控制台中看到成功消息。但是，当我点击动态附加的

时，我在控制台中并没有得到任何东西

我相信，这里缺少一些jQuery的基础知识。jQuery大师，评论/想法

这里有一些代码需要进一步澄清

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>");
})

$。每个（响应、函数（键、值）{
$（“#dropdownl”）。追加（“
”）；
})

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响应填充的

选项2

选项3

时，我在控制台中看不到任何内容

如果有什么不清楚，请告诉我。我会尝试进一步解释

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

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

我们利用jQuery的.on（）来完成这项工作

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

强制编辑

请不要将元素实际绑定到

$（文档）

，而是选择最接近的静态父元素。这是出于性能原因