JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent"> 
    <div id="title"> Title </div>
    <div id="child1"> Child 1 </div>
</div>

JavaScript

$("div").on("foo.bar", function(e) {
    if (!e.handled) {
        e.handled = true;
        $(e.target).find("div").each(function() {
            $(this).triggerHandler(e);
        });
    }
});

$("div").on("foo.bar2", function(e) {
    console.log("Called Wrongly", e.target);
});

$("div").on("foo.bar", function(e) {
    console.log("Called Correctly", e.target);
});

$("#parent").trigger("foo.bar");