JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="http://datatables.net/release-datatables/media/css/demo_table.css">
<input type="button" id="button" value="button" /> <br />
<input type="button" id="trgbutton" value="trigger click" />

JavaScript

$('#button').on('click', function(event) {
    //add a new element to body
    $('body').append('<div class="future">I am a new div</div>');
});


//bind a action to new element which is add a moment ago.
$('body').on('change', '.future', function() {
    $(this).css({
        'color': 'red',
        'font-weight': 'bold'
    });
    $(this).text("on click me.");
    $(this).on('click', {
        name: 'liujun'
    }, myhandler);
}).bind('DOMNodeInserted DOMNodeRemoved', function(event) {
    if (event.type == 'DOMNodeInserted') {
       // alert('Content added! Current content:' + '\n\n' + this.innerHTML);
    } else {
       // alert('Content removed! Current content:' + '\n\n' + this.innerHTML);
    };
});

$('#trgbutton').click(function() {
    $('.future').trigger('change');
});

function myhandler(event) {
    alert(event.data.name);
}