JSFiddle - React, Tailwind, and code Playground

by joycse06

HTML

<button id="click">Click me</button><span>Click handler on</span>

<br><br><br>

<a id="toggle" href="#">Toggle Handler</a>

JavaScript

bar = [];
toggle = false;

function preventClick(buttonID) {
    $('#' + buttonID).off('click', bar[buttonID]);
}

function allowClick(buttonID) {
    $('#' + buttonID).on('click', bar[buttonID]);

}

$(function() {
    bar['click'] = function() {
        alert('Clicked');
    };
    $('#toggle').click(function(e) {
        console.clear();
        e.preventDefault();
        if (toggle) {
            console.log('on', toggle);
            allowClick('click');
            $('span').text('click handler on');

        }
        else {
            console.log('off', toggle);
            preventClick('click');
            $('span').text('click handler off');

        }
        toggle = !toggle;

    });
    $('#click').on('click', bar['click']);

});