Jak zdobyć Selected element w rozwijanym menu bootstrap, gdzie rozwijane jest dynamicznie wypełniane

To jest podobne doJak wyświetlić wybrany element w rozwijanym tytule przycisku Bootstrap

Tylko różnica, moja lista rozwijana nie jest statyczna i jest wypełniana przez odpowiedź ajax. Poniżej kodunie działa tylko dla <li> elementy, które są wypełniane dynamicznie.

Aby przetestować powyższe, celowo ustawiłem statycznie<li> kiedy klikam ten element, widzę komunikat o sukcesie w konsoli. Ale kiedy klikam<li> które są dołączane dynamicznie, niczego nie dostaję w konsoli.

Wierzę, że brakuje tu podstawowej wiedzy jQuery. jQuery guru, komentarze / myśli?

Oto kod do dalszego wyjaśnienia.

Kod skryptu Java:

Drukowanie wybranej opcji w konsoli

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

Wypełnianie listy rozwijanej z odpowiedzi ajax JSON

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

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

Więc jeszcze raz, jeśli kliknęStatic test Option Widzę wiadomość w konsoli:Selected Option: Static test Option

Ale kiedy klikamOption2 Option 3 który jest wypełniany z odpowiedzi ajax, nic nie widzę w konsoli.

Daj mi znać, jeśli coś nie jest jasne. Spróbuję wyjaśnić dalej.

questionAnswers(1)

yourAnswerToTheQuestion