JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <button id="test_elem">Button to detach events from</button>
</div>
<br />

<button id="unbind">unbind other click events</button><br />
<button id="rebind">rebind other click events</button><br />
<button id="bind">bind your click events</button><br />

CSS

button {
    width: 100%;
}

JavaScript

// temporarily detach events
var clone;

// UNWANTED CLICK (we will try to temporarily remove this event)
$('#test_elem').on('click', function () {
    alert('Nasty, bothersome click');
});

// clone element with events:
clone = $('#test_elem').clone(true);

// unbind all click events
$('#unbind').on('click', function () {
    $('#test_elem').off('click');
});

// this replaces the unbound element with its preserved clone then update clone variable with fresh copy
$('#rebind').on('click', function () {
    $('#container').html(clone);
    clone = $('#test_elem').clone(true);
});

// this binds your click event
$('#bind').on('click', function () {
    $('#test_elem').on('click', function () {
        alert('your events');
    });
});