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

Question

Это похоже на How to Display Selected Item in Bootstrap Button Dropdown Title

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

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

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

Ниже приведен код для уточнения подробностей.

кода Java Script:

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

$(".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, который заполняется из АЯКС ответа, я не вижу ничего в консоли.

Дайте мне знать, если что-то неясно. Я попытаюсь объяснить дальше.

Answer 1

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

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

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

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

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

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