JSFiddle - React, Tailwind, and code Playground

by smingers

HTML

<button id="create">Create a button</button>

CSS

button {
    clear: left;
    float: left;
}

JavaScript

// event delegation

var $button = $('#create');

// Find all the .click-me elements and bind an event listener
$('.click-me').on('click', function (event) {
    // And give them an alert
    alert('I will never be fired!');
    
    // ...but they don't exist, yet! :____(
});

// Find the document, which DOES exist, and tell it to listen
// for click events on any .click-me elements that ever exist
$(document).on('click', '.click-me', function (event) {
    alert('Event delegation FTW!');
});

$button.on('click', function () {
    var $newButton = $('<button>', {
        'class': 'click-me',
        text: 'Click me, click me!'
    });
    
    $newButton.appendTo($('body'));
});