Событие click не срабатывает для вновь созданных тегов li

Со следующим кодом:

<!DOCTYPE html>
<html>
<head>
<title>test list</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
<style>
li{
display:inline;
}
</style>
<body>
<input type="hidden" value="4" id="value">

<ol></ol>

<button id="btn2">increase</button>
<button id="btn1">show</button>
<p></p>
</body>
<script>
$("li").click(function(){
    $(this).nextAll().css({"color":"red"});;
});

$("#btn2").click(function(){
    var text="<li> -> kkk</li>"; 
    $("ol").append(text);
});

$("#btn1").click(function(){
    $("p").text($("li").length);
});
</script>
</html>

любые вновь созданные теги "li", которые появляются после нажатия кнопки "увеличить", не вызывают обработчики, связанные с событием click.

$("li").click(function(){
    $(this).nextAll().css({"color":"red"});;
});

Подскажите, пожалуйста, причину, по которой это не работает. И можно ли заставить его работать? Если да, то как? Большое спасибо.

Источник

4 ответа

Решение

Попробуйте так: поскольку ваши 'li' генерируются динамически ( для дальнейшего чтения)

$("body").on('click','li',function(){
    $(this).nextAll().css({"color":"red"});;
});
Источник

Из документации jQuery: "Обработчики событий привязаны только к выбранным в данный момент элементам; они должны существовать на странице в тот момент, когда ваш код выполняет вызов.on(). Чтобы элементы присутствовали и могли быть выбраны, выполните привязку событий внутри обработчика готовых документов для элементов, которые находятся в разметке HTML на странице. Если новый HTML внедряется в страницу, выберите элементы и прикрепите обработчики событий после размещения нового HTML на странице. Или используйте делегированные события, чтобы прикрепить обработчик событий, как описано далее."

Источник

Попробуйте этот код:

   $(document).on('click', 'li', function(){

        $(this).nextAll().css({"color":"red"});;
   });
Источник

Может помочь поместить вашу библиотеку скриптов перед закрывающим тегом body...

    увеличить шоу

    ... смотрите здесь: скриптовая ссылка

    $(function() {  
$("#btn2").click(function(){  
    var text= " --> ";  
    $('ol').append('<li>'+text+'</li>');  
    $('ol li:not(":first")').css('color','red');  
});  

$("#btn1").click(function(){  
    $("p").text($("li").length);  
});     
});
    Источник
    Другие вопросы по тегам