JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div id="workspace">
            <h3 class="live-event">
                <span>Click me, by .live</span>
            </h3>
            <h3 class="delegate-event">
                <span>Click me, by .delegate</span>
            </h3>
        </div>
        <div id="log"></div>
    </body>
</html>

CSS

body span { color:blue; }
h3.live-event > span { color:red; }
h3.delegate-event > span { color: green; }

JavaScript

$("body").click(function(e) {
    $("#log").append("There is body click event.<br />=======================<br />");
});
$("#workspace").click(function(e) {
    $("#log").append("There is #workspace click event.<br />");
}, false);

$(".live-event").live("click", function(e){
    e.stopPropagation();
    $("#log").append("<span>There is .live click event.</span><br />=======================<br />");
}, false);

$("#workspace").delegate(".delegate-event", "click", function(e) {
    $("#log").append("<span>There is .delegate click event.</span><br />");
}, false);