Если вы напишите свою функцию следующим образом: jQuery("selector").on('click', function() {}), то jQuery свяжет обработчики событий с текущими доступными объектами, которые он выбирает с помощью селектора .
Если вы хотитеобрабатывать динамически добавленные селекторы, тогда вы должны использовать немного более подробный синтаксис: jQuery("staticSelector").on('click', 'dynamicSelector', function() {}).
В вашем случае разница минимальна:
$("body").on("click", ".filterchoice", function() {
alert("Handler for .click() called.");
});
Привязать ваш обработчик кликов к<body> (это, безусловно, существует), а затем всегда реагирует на любое событие щелчка на .filterchoice.
Это в документации jQuery: https://api.jquery.com/on/#on-events-selector-data-handler
Пример на странице, на которую ссылается страница документации jQuery:
Подход к делегированию события прикрепляет обработчик события только к одному элементу, tbody, и событие должно всплыть только на один уровень (от нажатой tr до tbody):
$ ("#dataTable tbody") .on ("click", "tr", function () {console.log ($ (this) .text ());});
Вот ваша скрипка, импортированная во фрагмент и измененная, как описано выше:
(function($) {
$(document).ready(function() {
$('ul.dropdown-menu').find('a').addClass('filterchoice');
});
$("body").on("click", ".filterchoice", function() {
alert("Handler for .click() called.");
});
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ticket-filter" id="ticket-filter-container">
<div id="ticket-toolbar">
<div class="dropdown" id="ticket-filters">
<a href="#" class="list-lead dropdown-toggle" data-toggle="dropdown">
All Tickets <i class="caret"></i>
</a>
<ul class="dropdown-menu " role="menu" aria-labelledby="dropdownMenu">
<li class="selected">
<span class="icon ticksymbol"></span>
<a href="#" data-loading-box="#ticket-list" data-method="get" data-remote="true" data-response-type="script">All Tickets</a>
</li>
<li>
<a href="#" data-loading-box="#ticket-list" data-method="get" data-remote="true" data-response-type="script">Open or Pending</a>
</li>
<li><a href="#" data-loading-box="#ticket-list" data-method="get" data-remote="true" data-response-type="script">Resolved or Closed</a>
</li>
</ul>
</div>
<div id="ticket-sub-toolbar">
<span id="ticket-sort" class="dropdown">
<ul class="dropdown-menu " role="menu" aria-labelledby="dropdownMenu">
<li class="selected">
<span class="icon ticksymbol"></span>
<a href="#" data-loading-box="#ticket-list" data-method="get" data-remote="true" data-response-type="script">Date Created</a>
</li>
<li>
<a href="#" data-loading-box="#ticket-list" data-method="get" data-remote="true" data-response-type="script">Last Modified</a>
</li>
<li>
<a href="#" data-loading-box="#ticket-list" data-method="get" data-remote="true" data-response-type="script">Status</a>
</li>
<li class="divider"></li>
<li>
<a href="#" data-loading-box="#ticket-list" data-method="get" data-remote="true" data-response-type="script">Ascending</a>
</li>
<li class="selected">
<span class="icon ticksymbol"></span>
<a href="#" data-loading-box="#ticket-list" data-method="get" data-remote="true" data-response-type="script">Descending</a>
</li>
</ul>
<a class="dropdown-toggle help-text" data-toggle="dropdown" href="#">
Sorted by <b> Date Created</b>
<i class="caret"></i>
</a>
</span>
</div>
</div>
</div>
Вам не нужно реструктурировать свой код.
Хотя я думаю, что @RoryMcCrossan прав - ваш код должен быть немного реструктурирован,это не из-за этой проблемы. Когда вы динамически загружаете данные или добавляете элемент DOM, реструктуризация не решит вашу «неработающую» проблему, но делегированный обработчик будет (поэтому вам придется использовать более подробный синтаксис).