Как получить выбранный элемент в раскрывающемся списке начальной загрузки, где выпадающее меню динамически заполнено

Это похоже на Как отобразить выбранный элемент в раскрывающемся списке кнопки Bootstrap

Единственное отличие, мой раскрывающийся список не является статическим и заполняется через ответ ajax. Ниже кода не работает только для <li> элементов, которые заполняются динамически.

Чтобы проверить выше, я намеренно помещаю статический <li>, когда я нажимаю на этот элемент, я могу видеть сообщение об успешности в консоли. Но, когда я нажимаю на <li>, которые добавляются динамически, я ничего не получаю в консоли.

Я верю, что есть некоторые фундаментальные знания jQuery, которые я здесь отсутствует. jQuery гуру, комментарии/мысли?

Вот еще один код для дальнейшего уточнения.

Java Script Код:

Печать выбранной опции в консоли

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

Наращивание выпадающего списка из ответа ajax 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

Но когда я нажимаю Option2 Option 3, который заполняется из ответа ajax, я ничего не вижу в консоли.

Сообщите мне, если что-то неясно. Я попытаюсь объяснить далее.

Ответ 1

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

Это простое делегирование событий... Элементы, которые не существуют при загрузке страницы, должны иметь событие, делегированное статическому родительскому элементу, который работает при загрузке страницы.

Мы используем jQuery.on(), чтобы завершить это.

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

Обязательное редактирование

На самом деле не привязывайте элементы к $(document) и вместо этого выбирайте ближайший родительский элемент, статический. Это по соображениям производительности.