JSFiddle - React, Tailwind, and code Playground

by rupesx

HTML

<p>Has an attached custom event.</p>
<div class="box">

<span style="display:none;"></span>
 </div>

CSS

p {
    color: red;
  }
  span {
    color: blue;
  }
  button{ clear:both; display:block}

JavaScript

$( "p" ).on( "myCustomEvent", function( event, myName ) {
  $( this ).text( myName + ", hi there!" );
  $( "span" )
    .stop()
    .css( "opacity", 1 )
    .text( "myName = " + myName )
    .fadeIn( 30 )
    .fadeOut( 5000 );
});
$( "button" ).click(function () {
  $( "p" ).trigger( "myCustomEvent", [ "John" ] );
  //alert(1);
});

var loop = setInterval(function(){
	$('.box').append('<button>Trigger custom event</button>');
	
},1000);
window.setTimeout(function(){ clearInterval(loop); },2000);