JSFiddle - React, Tailwind, and code Playground

HTML

<input type="radio" name="evHandlerName" id="evHandlerName1" value="click" />
<label for="evHandlerName1">click</label>
<input type="radio" name="evHandlerName" id="evHandlerName2" value="click.namespace1" />
<label for="evHandlerName2">click.namespace1</label>
<input type="radio" name="evHandlerName" id="evHandlerName3" value=".namespace1" />
<label for="evHandlerName3">.namespace1</label>
<br />
<button id="btnBind">Bind Event</button>
<button id="btnUnbind">Unbind Event</button>
<br />
<button id="btnLive">Live Event</button>
<button id="btnDie">Die Event</button>
<br />
<button id="btnDelegate">Delegate Event</button>
<button id="btnUndelegate">Undelegate Event</button>
<br /><br />
<button id="btnAdd">Add button</button>
<br /><br />
<button class="action">Say hi!</button>
<div style="display:none;" class="hi">Hi!</div>
<div style="display:none;" class="bye">Bye!</div>

JavaScript

function saludar() {
    $("div.hi").show().fadeOut("slow", function() {
        $("div.bye").show().fadeOut("slow");
    });
};

$("#btnDelegate").click(function() {
    $("body").delegate(".action", "click.namespace1", saludar);
});

$("#btnUndelegate").click(function() {
    $("body").undelegate(".action", $(":radio:checked").val());
});

$("#btnBind").click(function() {
    $("body .action").bind("click.namespace1", saludar);
});

$("#btnUnbind").click(function() {
    $("body .action").unbind($(":radio:checked").val());
});

$("#btnLive").click(function() {
    $("body .action").live("click.namespace1", saludar);
});

$("#btnDie").click(function() {
    $("body .action").die($(":radio:checked").val());
});

$("#btnAdd").click(function() {
    var btn = $("<button></button>")
        .addClass("action")
        .text("Say hi!");
    $("div:eq(0)").before(btn);
});