Почему не срабатывает простой обработчик события?

Question

[ince]

<div id="location-cont" class="container col-md-8 col-sm-8 dropdown form-group">
    <input id="location" class="btn btn-secondary dropdown-toggle form-control" data-toggle="dropdown" placeholder="Начните вводить название субъекта" title="Местоположение" defined="false">
    
        <!-- Здесь список местоположений -->
    <div class="dropdown-menu container" id="location-list" style="display: block;">
        <a class="dropdown-item submenu" href="#">Москва</a>
        <div class="dropdown-menu" id="id_region_27">
            <a class="dropdown-item terminus" href="#">ЗАО</a>
            <a class="dropdown-item terminus" href="#">Зеленоградский АО</a>
            <a class="dropdown-item terminus" href="#">Новомосковский АО</a>
            <a class="dropdown-item terminus" href="#">САО</a>
            <a class="dropdown-item terminus" href="#">СВАО</a>
            <a class="dropdown-item terminus" href="#">СЗАО</a>
            <a class="dropdown-item terminus" href="#">Троицкий АО</a>
            <a class="dropdown-item terminus" href="#">ЦАО</a>
            <a class="dropdown-item terminus" href="#">ЮАО</a>
            <a class="dropdown-item terminus" href="#">ЮВАО</a>
            <a class="dropdown-item terminus" href="#">ЮЗАО</a>
        </div><a class="dropdown-item submenu" href="#">Московскаяобласть</a>
        <div class="dropdown-menu" id="id_region_28">
            <a class="dropdown-item terminus" href="#">Видное</a>
            <a class="dropdown-item terminus" href="#">Дедовск</a>
            <a class="dropdown-item terminus" href="#">Дмитров</a>
            <a class="dropdown-item terminus" href="#">Долгопрудный</a>
            <a class="dropdown-item terminus" href="#">Домодедово</a>
            <a class="dropdown-item terminus" href="#">Железнодорожный</a>
            <a class="dropdown-item terminus" href="#">Жуковский</a>
            <a class="dropdown-item terminus" href="#">Истра</a>
            <a class="dropdown-item terminus" href="#">Клин</a>
            <a class="dropdown-item terminus" href="#">Королёв</a>
            <a class="dropdown-item terminus" href="#">Котельники</a>
            <a class="dropdown-item terminus" href="#">Красногорск</a>
            <a class="dropdown-item terminus" href="#">Лыткарино</a>
            <a class="dropdown-item terminus" href="#">Лобня</a>
            <a class="dropdown-item terminus" href="#">Люберцы</a>
            <a class="dropdown-item terminus" href="#">Мытищи</a>
            <a class="dropdown-item terminus" href="#">Наро-Фоминск</a>
            <a class="dropdown-item terminus" href="#">Ногинск</a>
            <a class="dropdown-item terminus" href="#">Одинцово</a>
            <a class="dropdown-item terminus" href="#">Подольск</a>
            <a class="dropdown-item terminus" href="#">Пушкино</a>
            <a class="dropdown-item terminus" href="#">Раменское</a>
            <a class="dropdown-item terminus" href="#">Реутов</a>
            <a class="dropdown-item terminus" href="#">Солнечногорск</a>
            <a class="dropdown-item terminus" href="#">Сергиев Посад</a>
            <a class="dropdown-item terminus" href="#">Химки</a>
            <a class="dropdown-item terminus" href="#">Щелково</a>
            <a class="dropdown-item terminus" href="#">Электросталь</a>
            <a class="dropdown-item terminus" href="#">Прочие населенные пункты</a>
        </div>        
    </div>

</div>

Есть код (сверху), требуется обработать событие по нажатию на элемент.
Пишу обработчик с таким селектором, но он не срабатывает.

$('#location-cont .terminus').on('click', function () {  				
		alert('$(this).text() = ' + $(this).text())
	});

Почему такое может быть?

Answer 1

[Антон]

$(document).on('click', '#location-cont .terminus' , function () {

Comments

[ince]

В чем причина, в том что элементы создаются динамически? Или еще в чем-то?
Где об этом можно почитать?

[leni_m]

ince, $('#location-cont .terminus').on потому что скрипт при загрузке вешает на все #location-cont .terminus обработчик. Если таковые появились позже, они появляются уже без повешенного на них обработчика.
Такие конструкции решают проблему:

$(document).on('click', '#location-cont .terminus' 
$('html').on('click', '#location-cont .terminus' 
$('body').on('click', '#location-cont .terminus'