JSFiddle - React, Tailwind, and code Playground

by mesak

HTML

<div id="test1">
    <ul>
        <li>TEST1<input type="text"  id="input-test1" /></li>
    </ul>
</div>

<div id="test2">
    <ul>
        <li>TEST2<input type="text" id="input-test2" /></li>
    </ul>
</div>

<div id="test3">
    <ul>
        <li>TEST3<input type="text" id="input-test3" /></li>
    </ul>
</div>
<div id="test4">
    <ul>
        <li>TEST4<input type="text" id="input-test4" /></li>
    </ul>
</div>
<pre id="debug">

</pre>

JavaScript

$(document).bind('focusin',function(e) {
    $('#debug').append(e.target.nodeName + '-focusin' +'\n');
}).bind('focus',function(e){
    $('#debug').append(e.target.nodeName + '-focus' +'\n');
}).bind('blur',function(e){
    $('#debug').append(e.target.nodeName + '-blur' +'\n');
}).bind('focusout',function(e){
    $('#debug').append(e.target.nodeName + '-focusout' +'\n');
})