Niladri Mandal Ответов: 2

Событие Jquery click не работает с динамически созданным списком ul li в MVC

На моем сайте https://www.example.com , на событии нажатия кнопки (в jQuery) Я заполняю динамически созданный список html UL Li.
Он работает нормально, но когда я использую jQuery click event на динамически созданном ul Li, он не работает.

Что я уже пробовал:

Этот код выглядит следующим образом:
$(document).ready(function() { $('ul.cls-ul li').click(function(e) { alert(this); }); })
Есть ли лучшее решение?

2 Ответов

Рейтинг:
2

Chris Copeland

Это зависит от того, как ваш динамически генерируемый ul создается. То $(document).ready() функция вызывается после того, как дом страницы и закончили строить. Если ваш ul строится из оператора AJAX или какого-то другого ready() обратный звонок, то вам нужно будет зарегистрировать click() как только сгенерированный li элементы были сгенерированы.

Звонок для регистрации $('ul.cls-ul li').click() не будет регистрировать обработчик щелчка для элементов, добавленных в будущем, поэтому обязательно вызовите его после того, как li элементы были сгенерированы и добавлены в HTML-код вашей страницы.

Рейтинг:
0

Richard Deeming

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

Вместо этого используйте делегированный обработчик событий:

$(function(){
    $(document).on("click", "ul.cls-ul li", function(e) { alert(this); });
});
.on() | jQuery API документация[^]

NB: Вы также должны обратить внимание на Заметки в разделе ready документация:
.ready() | документация по API jQuery[^]:
jQuery предлагает несколько способов прикрепить функцию, которая будет работать, когда DOM будет готов. Все следующие синтаксисы эквивалентны:
  • $( handler )
  • $( document ).ready( handler )
  • $( "document" ).ready( handler )
  • $( "img" ).ready( handler )
  • $().ready( handler )

Начиная с jQuery 3.0, рекомендуется использовать только первый синтаксис; другие синтаксисы все еще работают, но устарели.