JSFiddle - React, Tailwind, and code Playground

by John Schulz

HTML

<h1>Binding / Delegation Tests</h1>
<p> content content content content content content content content
    content content content content content.</p>
<p> content content content content content content content content
    content content content content content.</p>
<p> content content content content content content content content
    content content content content content.</p>
<ul>
    <li>foo</li>
    <li>bar</li>
    <li>baz</li>
    <li>bam</li>
</ul>
<ol>
    <li>foo</li>
    <li>bar</li>
    <li>baz</li>
    <li>bam</li>
</ol>
<dl>
    <dt>Doe</dt>
    <dd>A deer. A female deer.</dd>
    <dt>Ray</dt>
    <dd>A drop of golden sun.</dd>
    <dt>Me</dt>
    <dd>A name I call myself</dd>
</dl>
<hr/>
<button>Clear</button>
<div id="output"></div>

CSS

.highlight { 
    background-color: yellow;
}

JavaScript

var $output = $('#output'),
    highlight_class = 'highlight';

$(document).bind('click', function (e)
{
    var message = '<p>The click was on '+ e.target.nodeName + '</p>';
    $(e.target).addClass( highlight_class );
    $output.append( message );
});

$('button').bind('click', function (e)
{ 
    e.stopPropagation();
    $('.'+highlight_class).removeClass( highlight_class );
    $output.html(' '); 
});