JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Test jquery.delegate</h2>
    <div id='delegate'>
        <div id="A">
            <div id="B">
                <button id="button">Click</button>
            </div>
        </div>
    </div>
    <div id="result">
    </div>

JavaScript

function report(name) {
    return function(ev) {
        console.log(name, ev, "happened");
        $('#result').append('<div>' + name + " happened </div>");
    };
}

$(document).ready(function() {
    console.log('ready');
    //Set up the event delegation
    $('#delegate').delegate('#B', 'myevent', report('delegate.#B'));
    $('#A').bind('myevent', report('A.myevent'));
    $('#A').delegate('#B', 'myevent', report('A.#B myevent'));
    $("#B").bind('myevent', report('B.myevent'));
    //The optional stop events
    $('#A').bind('myevent', function(ev) {
        console.log("A.myevent stop propagation");
        ev.stopPropagation()
    });

    //The click handler
    $('button').click(function(el, ev) {
        $('#B').trigger('myevent');
    });
});