Jquery - не удается заставить класс работать в динамически добавленном элементе li

Question

У меня есть список выбора ввода, который позволяет пользователю выбрать несколько элементов.После выбора динамически создаст новый элемент li в моем упорядоченном списке, как показано в HTML-коде ниже. Сценарий

$('.liRemoveItem').click(function(){
   alert("X is clicked");
   //remove child li
});

Предположим, нажав на X, который имеет класс liRemoveItem, я хочу удалить дочерний элемент li, но класс даже не работает для простого предупреждения,Я думаю, это потому, что ребенок был создан динамически.

Если li был добавлен в HTML при загрузке и не был создан динамически, класс liRemoveItem работает.Может кто-нибудь подсказать, что я сделал не так?Спасибо.

Answer 1

используйте jQuery live метод

Присоедините обработчик к событию для всех элементов, которые соответствуют текущему селектору, сейчас и в будущем.

   $('.liRemoveItem').live("click",function(){    
      alert("X is clicked");    //remove child li 
   });

Метод .live() может воздействовать на элементы, которые еще не добавлены к DOM с помощью делегирования события: обработчик привязан кэлемент предка отвечает за события, которые запускаются его потомками.Обработчик, переданный в .live(), никогда не привязывается к элементу ;вместо этого .live() связывает специальный обработчик с корнем дерева DOM

Answer 2

Попробуйте использовать это

$('.liRemoveItem').live('click', function() {
   alert("X is clicked");
           //remove child li

});