如何获得在引导下拉菜单，其中的下拉是动态填充所选元素 [英] How to get Selected element in bootstrap dropdown, where dropdown is dynamically populated

问题描述

这是类似于 <一href="http://stackoverflow.com/questions/13437446/how-to-display-selected-item-in-bootstrap-button-dropdown-title">How要显示所选的项目，引导按钮下拉标题

唯一的区别，我的下拉列表不是静态的，它是通过Ajax响应填充。 下面code 不仅适用于 ＆LT;李＆GT; 它们是动态填充的物品。

要测试上面，我故意把静态＆LT;李＆GT; 当我点击该项目，我可以看到成功消息的控制台。但是，当我点击＆LT;李＆GT; 这是动态附加，我没有得到任何控制台

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

下面是一些code为进一步澄清。

Java脚本code：

在控制台打印所选选项

  $（下拉菜单中利A）。点击（函数（）{
        的console.log（当前选项：+ $（本）的.text（））;
}）;
 

从阿贾克斯JSON响应填充下拉

  $。每一个（响应，功能（键，值）{
    $（＃dropDownUL）追加（＆LT;李＆GT;＆LT;在tabIndex = \ -  1 \的href = \＃\ALI​​GN = \左\＆gt;中+价值+＆LT; / A＆GT;＆LT; /李＆GT;）;
}）
 

HTML code：

 ＆LT; D​​IV CLASS =下拉BTN＆GT;
    ＆LT; D​​IV ID =dropDownId级=下拉菜单，切换ID =dLabel角色=按钮数据切换=下拉列表中的数据目标=＃＆GT;
        集合
        ＆LT; B类=插入符号＆GT;＆LT; / B＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; UL ID =dropDownUL级=下拉菜单中拉左角色=菜单中的咏叹调 -  labelledby =dLabel＆GT;
    ＆LT;李＆GT;＆LT;在tabIndex = -  1HREF =＃align =left＆GT;静态测试选项和LT; / A＆GT;＆LT; /李＆GT;
    ＆LT; / UL＆GT;


＆LT; / DIV＆GT;
 

因此​​，再次，如果我点击静态测试选项我可以看到控制台消息：当前选项：静态测试选项

但是，当我点击选项2 选项3 这是从Ajax响应填充，我没有看到任何控制台。

让我知道，如果事情是不明确的。我会尝试进一步解释。

解决方案

  $（文件）。在（'点击'，'.dropdown菜单里一'，函数（）{
    的console.log（当前选项：+ $（本）的.text（））;
}）;
 

这仅仅是简单的事件代表团......这不，在页面加载存在，必须有委托给静态父元素事件元素确实在页面加载的存在。

我们利用jQuery的。对（）来完成这一点。

  $（staticElement）。在（事件，dynamicElement，函数（）{//等}）;
 

强制性修改

请不要实际上绑定元素的 $（文件），而是选择最接近的父元素是静态的。这是出于性能的考虑。

This is similar to How to Display Selected Item in Bootstrap Button Dropdown Title

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.

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.

I believe, there is some jQuery fundamental knowledge I missing here. jQuery gurus, comments/thoughts?

Here is some code for further clarification.

Java Script Code:

Printing selected option in console

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

Populating dropdown from ajax JSON response

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

HTML code:

<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 Option I can see message in console : Selected Option: Static test Option

But, when I click on Option2 Option 3 which is populated from ajax response, I don't see anything in console.

Let me know if something is not clear. I will try to explain further.

解决方案

$(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 does exist at page load.

We leverage jQuery's .on() to complete this.

  $(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.

这篇关于如何获得在引导下拉菜单，其中的下拉是动态填充所选元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！