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="btnLive">Live Event</button>
<button id="btnDie">Die 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");
    });
};

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

$("#btnDie").click(function() {
    $(document).unbind($(":radio:checked").val());
});

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

$(document).bind("click.namespace2", function() {
    alert('a');
});