JSFiddle - React, Tailwind, and code Playground

by Sahil Kashyap

HTML

<h1>Using .on()</h1>
<h2>Dynamically added link:</h2>
<div id="container"></div>

CSS

body {
    font: 12px Tahoma, Arial, Helvetica, sans-serif;
    color: #333;
    margin:20px;
}
h1 {
    font-size:1.4em;
    margin-bottom:20px;
}
h2 {
    font-size: 1.2em;
}
#container {
    border:dashed 1px #aaa;
    font-size: 1em;
    padding:10px;
}
a {
    color:green;
}

JavaScript

$(function () {

    // Attach Event
    // new way (jQuery 1.7+) - on(events, selector, handler);
    $('#container').on('click', 'a', function (event) {
        event.preventDefault();
        console.log('Anchor clicked!');
        $('#container').append('<a href="#output">Click mebvb!</a>');
       // alert('Anchor clicked!');
    });

    // Create elements dynamically
    $('#container').append('<a href="#output">Click mebvb!</a>');
});