JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<div id="container">
    <ul id="list">
        <li><a href="http://domain1.com">Item #1</a></li>
        <li><a href="/local/path/1">Item #2</a></li>
        <li><a href="/local/path/2">Item #3</a></li>
        <li><a href="http://domain4.com">Item #4</a></li>
    </ul>
</div>

JavaScript

//http://learn.jquery.com/events/event-delegation/

// Attach a directly bound event handler
//$( "#list a" ).on( "click", function( event ) {
  //  event.preventDefault();
  //  console.log( $( this ).text() );
//});

// Attach a delegated event handler
$( "#list" ).on( "click", "a", function( event ) {
    event.preventDefault();
    console.log( $( this ).text() );
});

// Add a new element on to our existing list
$( "#list" ).append( "<li><a href='http://newdomain.com'>Item #5</a></li>" );