JSFiddle - React, Tailwind, and code Playground

by bryandowning

HTML

<div family>
    <div parent>
        <div child></div>
    </div>
</div>

CSS

div { 
    margin: 15% auto;
    overflow: hidden;
    background-color: rgba(0,0,0,0.3);
}
[family] {
    width: 10em;
    height: 10em;
}
[family] div {
    width: 70%;
    height: 70%;
}

JavaScript

var $f = $('[family]');
var $p = $('[parent]');
var $c = $('[child]');

function setupHandlers() {
    $f.off();
    $f.on('click', '[parent]', function () {
        console.log('parent event handler fired');
    });
    $f.on('click.fam', '[parent]', function () {
        console.log('namespaced parent event handler fired');
    });
    
    
    $f.on('click', '[child]', function () {
        console.log('child event handler fired');
    });
    $f.on('click.family', '[child]', function () {
        console.log('namespaced child event handler fired');
    });
}


setupHandlers();
$c.trigger('click');
console.log('====================================== four event handlers should have fired');

$f.off('.family', '[parent]');

$c.trigger('click');
console.log('====================================== three event handlers should have fired');