JSFiddle - React, Tailwind, and code Playground

by LyndseyB

HTML

<ul id="myList">
    <li> List 1 </li>
    <li> List 2 </li>
</ul>

<a href="#" id="addNode"> Add another node </a>

JavaScript

$(function() {
    var myList = $('#myList'),
       	addNode = $('#addNode');
    
    // uncomment this and try it out... it will work for the first two items but NOT for any dynamically added elements...
    //myList.find('li').click(function(e) {
    //    alert("Clicked " + $(this).text());
    //});
    
    addNode.click(function(e) {
        myList.append("<li> New List Item added Dynamically </li>");   // click event won't work on this!!     
        e.preventDefault();
    });  
    
    // using event delegation...
    myList.click(function(e) {        
        if(e.target.nodeName === "LI") {
            alert("Clicked " + $(e.target).text());
        }
    });
});