JSFiddle - React, Tailwind, and code Playground

HTML

<div class="click-me-container">
  <div class="click-me">Click me on your iOS device!</div>
</div>

<button class="activate">Activate click-events for iOS!</button>

<h3>The iOS click event activation button</h3>

<p>For some reason, iOS and jquery live "click" aren't best friends. The click event handler only triggers the callback when a click handler is bound to the element or any of its parents, excluding the document body.</p>

CSS

.click-me {
    padding: 10px;
    margin: 10px;
    border: 1px solid black;
}

h3, p {
    margin: 1em 0.5em;   
}

body {
    font-family: verdana;
    font-size: 1px solid black;    
}

JavaScript

$(document).on("click", ".click-me", function() {
    $(this).text("Yay! You clicked me!");
});

$(".activate").click(function() {
    $(".click-me-container").click(function() {});
    $(this).remove();
});