JSFiddle - React, Tailwind, and code Playground

HTML

<p class="click-one">click-one</p>
<p class="clickFoo-one">clickFoo-one</p>
<hr />
<p class="click-on-off">click-on-off</p>
<p class="clickFoo-on-off">clickFoo-on-off</p>

JavaScript

$.event.special.clickFoo = {
    delegateType: "click",
    bindType: "click",
    handle: function(event) {
        event.type = event.handleObj.origType;
        ret = event.handleObj.handler.apply(this, arguments);
        event.type = event.handleObj.type;
        return ret;
    }
};

// GOOD: Only clickable once
$(".click-one").one("click", function(event) {
    $(this).append(" world");
});

// BAD: Clickable many times
$(".clickFoo-one").one("clickFoo", function(event) {
    $(this).append(" world");
});

// GOOD: Only clickable once
var fnOrig = function(event) {
    $(this).append(" world");
};
var fn = function(event) {
    $(this).off("clickFoo");
    return fnOrig.apply(this, arguments);
};
$(".click-on-off").one("clickFoo", fn);

// BAD: Clickable many times
var fnOrig = function(event) {
    $(this).append(" world");
};
var fn = function(event) {
    $(this).off("clickFoo", fnOrig);
    return fnOrig.apply(this, arguments);
};
$(".clickFoo-on-off").one("clickFoo", fn);