jQuery Dynamic li Click Event

In this tutorial we will learn how to trigger a click event for dynamic li tag. Since jQuery click() method doesn't work for dynamically created li tag, we can use jQuery on() method to bind click event with dynamic li elements.

on() method

jQuery on() method attaches one or more events with the HTML elements.

on() method is mainly used to attach the click event and other events with the elements that are created dynamically, by the user with help of script.

HTML Code

HTML Code is given below, in this code we have a ul tag with three list items and a button tag to dynamically add more list items. This is done using click() method and append() method.

<!DOCTYPE html>
<html>
<head>
<title>jQuery Dynamic li Click Event</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  
</head>             
<body>

<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<button id='btn'>Add Li Tags</button>    
    
<script src="script.js"></script>    
</body>
</html>

JQuery Code

JQuery Code is given below, jQuery click() method is used to tie the execution of code with click event of button tag.

append() method is used to add HTML tag or HTML content at the end of selected HTML element.

In this example it is adding more li tags dynamically.

on() method is then used to add click event on all li tags including dynamic li tags and static li tags. This click event will execute a function to change background of all list items.

This is not possible with click() method since it will only add event to static li tags, it doesn't work for dynamic ones.

<script>
$(document).ready(function() {
    var count = 0;
    $('#btn').click(function() {
      count = count + 1;
      $("#list").append("<li>Dynamic Li Tag " + count + "</li>");     
    });
    $("#list").on("click","li",function() {
        $(this).css("background-color", "red");
    });
});
</script>

In second example all we have used click() method to target all li tags but the code inside click() method will not run for dynamic list items and it will only change background of other li tags.

<script>
$(document).ready(function(){
    var count = 0;
    $('#btn').click(function(){
      count = count + 1;
      $("#list").append("<li>Dynamic Li Tag " + count + "</li>");     
    });
    $("#list li").click(function(){
        $(this).css("background-color", "red");
    });
});
</script>

Demo

Video Tutorial

Watch video tutorial on How To add Click event on Dynamic li tags with jQuery.

Check radio button Dynamically with jQuery Change Background Color on hover with jQuery Hide and Show div using jQuery Get value of input element with jQuery Remove last child of parent element with jQuery Add li tag to the end of list jQuery Delete first row of Table with jQuery Delete last row of Table with jQuery Add first list item using jQuery jQuery Get id of Button jQuery toggle show hide on click Disable Button after Click with jQuery Get Button Text with jQuery jQuery Dynamic li Click Event How To Remove all Spaces in String with jQuery Get Selected file name in jQuery Remove Last Option of Select tag with jQuery Remove First Option from Select tag in jQuery jQuery Capitalize First Letter of String jQuery Check input value length jQuery Count all elements with same Class jQuery Get Checked Radio Button Value By Class jQuery Highlight Text in Div Get Checked Radio Button Value By Name in jQuery Get Checked Radio Button Value By id jQuery