Try It Editor
Tip: Press
Ctrl/⌘ + Enter
to Run
▶ Run
Reset
Copy
Download
Code
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Delegation</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <ul id="list"></ul> <button id="add">Add item</button> <div id="out"></div> <script> var i = 0; $("#add").on("click", function(){ $("#list").append("<li class='item'>Item " + (++i) + "</li>"); }); // Delegate to parent for future items $("#list").on("click", "li.item", function(){ $("#out").text($(this).text() + " clicked"); }); </script> </body> </html>
Output