JSFiddle - React, Tailwind, and code Playground

HTML

<div id="directo">
    <h2>Eventos de botones que no existe</h2>
    <button class="add">Añadir boton</button>
</div>
<hr/>
<div id="delegado">
    <h2>Eventos de botones que no existe</h2>
    <button class="add">Añadir boton</button>
</div>

JavaScript

$(function(){
    
    $(".add").click(function(){ //Boton para añadir botones dinamicamente
        $(this).parent().append('<button class="dinamico">pulsame</button>');
    });
    
    $("#directo .dinamico").click(function(){ //Boton de evento directo.
        //Cuando carga la pagina no existe ningún boton con la clase dinamico en el div directo
        //Asi que no funcionará nunca.
        alert("jamás funcionará");
    });
    
    $("body").on("click","#delegado .dinamico",function(){
        //Cuando carga la página, pone por ejemplo al BODY, que sí existe, a escuchar eventos
        //del tipo CLICK. Cuando captura uno, comprueba si fue disparado por un boton con
        //la clase dinamico metido en el div delegado.
        alert("funciona");
    });
});