如何引導下拉菜單，其中下拉列表中動態填充

這類似於 How to Display Selected Item in Bootstrap Button Dropdown Title 如何引導下拉菜單，其中下拉列表中動態填充

唯一的區別獲得選中的元素，我的下拉列表中也不是一成不變的，它是通過Ajax響應填充。以下代碼僅適用於<li>動態填充的項目。

爲了上面的測試，我有意地把一個靜態的<li>當我點擊那個項目，我可以在控制檯中看到成功消息。但是，當我點擊<li>這是動態追加，我沒有得到任何東西在控制檯。

我相信，這裏有一些我缺少的基本知識。 jQuery大師，評論/想法？

下面是一些代碼進一步澄清。

Java腳本代碼：控制檯

打印所選的選項

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

從阿賈克斯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>

所以再次，如果我點擊Static test Option我可以在控制檯中看到消息：Selected Option: Static test Option

但是，當我點擊Option2Option 3這是從Ajax響應填充，我沒有看到任何控制檯。

讓我知道如果有什麼不清楚。我會嘗試進一步解釋。

來源

2013-04-12 Watt

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

這僅僅是簡單的事件......代表團沒有在頁面加載存在必須委託給不在頁面加載存在的靜態父元素的事件元素。

我們利用jQuery的.on（）來完成此操作。

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

強制性編輯

請不要實際結合元素到$(document)，而是選擇是靜態的最接近的父元素。這是出於性能原因。

來源

2013-04-12 19:34:10 Ohgodwhy

+1感謝您提供的信息和解決方案，請嘗試此操作。 – Watt

它的工作！花3個小時之前應該來這裏:) – Watt

如何引導下拉菜單，其中下拉列表中動態填充

回答

相關問題