jQuery 如何在 bootstrap 下拉列表中获取 Selected 元素，其中动态填充下拉列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15979359/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get Selected element in bootstrap dropdown, where dropdown is dynamically populated
提问by Watt
This is similar to How to Display Selected Item in Bootstrap Button Dropdown Title
这类似于 如何在 Bootstrap 按钮下拉标题中显示所选项目
Only difference, my dropdown list is not static and it is populated through ajax response.
Below code doesn't work only for<li>items which are populated dynamically.
唯一的区别是，我的下拉列表不是静态的，它是通过 ajax 响应填充的。下面的代码不仅适用于<li>动态填充的项目。
To test above, I intentionally put a static <li>when I click on that item, I can see success message in console. But, when I click on <li>which are appended dynamically, I don't get anything in console.
为了进行上面的测试，我故意<li>在单击该项目时放置了一个静态信息，我可以在控制台中看到成功消息。但是，当我单击<li>动态附加的内容时，控制台中没有任何内容。
I believe, there is some jQuery fundamental knowledge I missing here. jQuery gurus, comments/thoughts?
我相信，我在这里缺少一些 jQuery 基础知识。jQuery 大师，评论/想法？
Here is some code for further clarification.
这是一些代码以进一步说明。
Java Script Code:
Java脚本代码：
Printing selected option in console
在控制台中打印选定的选项
$(".dropdown-menu li a").click(function () {
console.log("Selected Option:"+$(this).text());
});
Populating dropdown from ajax JSON response
从 ajax JSON 响应填充下拉列表
$.each(response, function (key, value) {
$("#dropDownUL").append("<li> <a tabindex=\"-1\" href=\"#\" align=\"left\"> " + value + "</a> </li>");
})
HTML code:
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>
So, once again, if I click on Static test OptionI can see message in console : Selected Option: Static test Option
所以，再一次，如果我点击Static test Option我可以在控制台中看到消息：Selected Option: Static test Option
But, when I click on Option2Option 3which is populated from ajax response, I don't see anything in console.
但是，当我单击Option2Option 3从 ajax 响应填充的内容时，我在控制台中看不到任何内容。
Let me know if something is not clear. I will try to explain further.
如果有不清楚的地方，请告诉我。我将尝试进一步解释。
回答by Ohgodwhy
$(document).on('click', '.dropdown-menu li a', function () {
console.log("Selected Option:"+$(this).text());
});
This is just simple event delegation...Elements that don't exist at page load must have the event delegated to a static parent element that doesexist at page load.
这只是简单的事件委托...页面加载时不存在的元素必须将事件委托给页面加载时确实存在的静态父元素。
We leverage jQuery's .on() to complete this.
我们利用 jQuery 的 .on() 来完成这个。
$(staticElement).on(event, dynamicElement, function(){ //etc });
Obligatory Edit
强制性编辑
Please don't actually bind elements to the $(document)and instead choose the closest parent element that is static. This is for performance reasons.
请不要实际将元素绑定到$(document)，而是选择最接近的静态父元素。这是出于性能原因。
