JSFiddle - React, Tailwind, and code Playground

by marcuswhybrow

HTML

<script src="https://github.com/marcuswhybrow/jquery-state-bindings/raw/master/jquery.statebindings.js"></script>
<button id="target">I was selected on my own</button>

<br /><br />

<button class="target-class">1st of target pair</button>
<button class="target-class">2nd of target pair</button>

<br /><br />

<button id="change-mode">Change Mode</button>

JavaScript

$(function() {
    
    function normalHandler(e) {
        alert('NORMAL MODE ' + $(this).text());
    }
    
    function editHandler(e) {
        alert('EDIT MODE ' + $(this).text());
    }
    
    $('#target').stateBindings({
        'normal': {
            'click': normalHandler
        },
        'edit': {
            'click': editHandler
        }
    });
    
    $('.target-class').stateBindings({
        'normal': {
            'click': normalHandler
        },
        'edit': {
            'click': editHandler
        }
    });
    
    $('#change-mode').stateBindings({
        'normal': {
            'click': function(e) {
                $.stateBindings.setState('edit');
            }
        },
        'edit': {
            'click': function(e) {
                $.stateBindings.setState('normal');
            }
        }
    });
    
    $.stateBindings.setState('normal');
});