How to trigger jquery click event for dynamically generated list

Question

Hi I am trying to to replace already created list by new list dynamically using jquery. But on newly created list, I am not able to use any jquery event.

I have created a list of players

Sachin
Sourav
Rahul

On clicking any list name it is alerting its id, then a newly created list is replacing dynamically using jquery.

Kohli
MS
Rahane

But I am not able to pick the click event for newly created list. It is not showing any error in console and nothing happening when we click any name of new dynamic list.

<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>

I am clueless now, how to make this working.

You could use delegated events, but in your case it seems quite obvious that you could just replace the content inside each LI when clicked, instead of replacing the entire list — adeneo
– adeneo, Commented Jan 16, 2017 at 19:19

psdev · Accepted Answer · 2017-01-16 19:23:54Z

1

Use "on" method. Instead of $("body") selector you can use other element that is not dynamically created.

$('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);
});

answered Jan 16, 2017 at 19:23

psdev

874 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Emmanuel Over a year ago

It is preferable to add the listener to the nearest non-generate element. In this case, I'd suggest you use $('#videowrapper') instead of $('body') .

psdev Over a year ago

Yes you are right. I just wasn't sure which part of his code is 'non-generated'.

Richard Hamilton · Accepted Answer · 2017-01-16 19:24:53Z

0

Since you mentioned dynamically created elements, you need to use event delegation with on

Check out this snippet

$("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>

edited Jan 16, 2017 at 19:24

answered Jan 16, 2017 at 19:19

Richard Hamilton

26.5k11 gold badges65 silver badges88 bronze badges

Collectives™ on Stack Overflow

How to trigger jquery click event for dynamically generated list

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related