Jak uzyskać wybranego elementu w bootstrap rozwijanej gdzie rozwijana jest dynamicznie zaludnionych

Question

Jest to podobne do How to Display Selected Item in Bootstrap Button Dropdown Title

Jedyna różnica, moja lista rozwijana nie jest statyczny i jest zamieszkana przez ajax odpowiedzi. Poniższy kod nie działa tylko dla<li> elementów, które są wypełniane dynamicznie.

Aby przetestować powyżej, celowo umieszczam statyczny kod <li> po kliknięciu tego elementu, widzę komunikat o powodzeniu w konsoli. Ale po kliknięciu na <li>, które są dołączane dynamicznie, nie dostaję niczego w konsoli.

Wierzę, że istnieje pewna podstawowa wiedza jQuery, której tu brakuje. guru jQuery, komentarze/myśli?

Oto kod do dalszych wyjaśnień.

kod Java Script:

wybrana opcja Druk w konsoli

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

Zapełnianie rozwijaną z Ajax odpowiedzi JSON

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

HTML kod:

<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> 

Tak Po raz kolejny, jeśli kliknę Static test Option widzę komunikat w konsoli: Selected Option: Static test Option

Ale gdy klikam na Option2Option 3 który jest wypełniana od ajax odpowiedzi, nie widzę nic w konsoli.

Daj mi znać, jeśli coś nie jest jasne. Postaram się wyjaśnić dalej.

Answer 1

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

To tylko prosty delegacja wydarzenie ... Elementy, które nie istnieją na stronie obciążenia musi mieć zdarzenie delegowanego do statycznego elementu nadrzędnego że ma istnieć na stronie obciążenia.

Wykorzystujemy jQuery do .on(), aby to zakończyć.

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

obowiązkowe Edit

Proszę nie faktycznie wiążą elementy do $(document) i zamiast wybrać najbliższy elementu nadrzędnego, który jest statyczny. Dzieje się tak ze względu na wydajność.