Как вызвать событие jquery click для динамически сгенерированного списка

Привет Я пытаюсь заменить динамически новый список с помощью jquery. Но в недавно созданном списке я не могу использовать какое-либо событие jquery.Как вызвать событие jquery click для динамически сгенерированного списка

Я создал список игроков

Sachin
Sourav
Рахул

При нажатии любого имени СПИСКА предупреждая его идентификатор, а затем вновь созданный список замены динамически используя jquery.

Коли
MS
Rahane

Но я не в состоянии выбрать событие щелчка для вновь созданного списка. Он не показывает никаких ошибок в консоли и ничего не происходит, когда мы нажимаем любое имя нового динамического списка.

<html> 
<head> 

<script src="jquery-3.1.1.js"></script> 
<script> 
$(document).ready(function(){ 
    $("#videoul li").click(function(){ 
     var vocab_id = $(this).attr('id'); 
     alert("Hi the ID is " + vocab_id); 

     var aaila = '<a href="#" id="i_am_link">Click me again</a><ul id = "videoul"><li id="Kohli">Virat</li><li id="Dhoni">M S</li><li id="Rahane">Ajinkya</li></ul>'; 

     $('#videowrapper').html(aaila); 
    }); 
}); 
</script> 
</head> 
<body> 

<div id="videowrapper"><a href="#abc" id="i_am_link">Click me</a> 
    <ul id="videoul"> 
     <li id="Tendulkar">Sachin</li> 
     <li id="Ganguly">Sourav</li> 
     <li id="Dravid">Rahul</li> 
    </ul> 
</div> 


</body> 
</html>

Не знаю, как это сделать.

источник

2017-01-16 Sunil Singh

Вы можете использовать делегированы события, но в вашем случае это кажется вполне очевидным, что вы могли бы просто заменить содержимое внутри каждый LI при нажатии, вместо того, чтобы заменить весь список – adeneo

Поскольку вы упомянули динамически созданные элементы, вам нужно использовать делегирование событий с on

проверить этот сниппета

$("body").on("click", "#videoul li", function(){ 
 
    var vocab_id = $(this).parent().attr('id'); 
 
    console.log("Hi the ID is " + vocab_id); 
 
    
 
    var aaila = '<a href="#" id="i_am_link">Click me again</a><ul id = "videoul"><li id="Kohli">Virat</li><li id="Dhoni">M S</li><li id="Rahane">Ajinkya</li></ul>'; 
 
    
 
    $('#videowrapper').html(aaila); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="videowrapper"><a href="#abc" id="i_am_link">Click me</a> 
 
    <ul id="videoul"> 
 
     <li id="Tendulkar">Sachin</li> 
 
     <li id="Ganguly">Sourav</li> 
 
     <li id="Dravid">Rahul</li> 
 
    </ul> 
 
</div>

источник

2017-01-16 19:19:44

Спасибо Ричарда, его работа ... :) –

Использование "на" метод. Вместо селектора $ ("body") вы можете использовать другой элемент, который не создается динамически.

$('body').on('click', '#videoul li', function() { 
    var vocab_id = $(this).attr('id'); 
    alert("Hi the ID is " + vocab_id); 

    var aaila = '<a href="#" id="i_am_link">Click me again</a><ul id = "videoul"><li id="Kohli">Virat</li><li id="Dhoni">M S</li><li id="Rahane">Ajinkya</li></ul>'; 

    $('#videowrapper').html(aaila); 
});

источник

2017-01-16 19:23:54 psdev

Предпочтительно добавлять слушателя к ближайшему негенерирующему элементу. В этом случае я бы предложил использовать '$ ('# videowrapper')' вместо '$ ('body')'. – Emmanuel

Да, вы правы. Я просто не был уверен, какая часть его кода «не сгенерирована». – psdev

Как вызвать событие jquery click для динамически сгенерированного списка

ответ

Смежные вопросы