javascript - How to define function on click, after element append in dynamically or (setTimeInterval) -

this question has answer here:

• event binding on dynamically created elements? 18 answers

i have made on click function dynamic elements not working, there way around it?

$( "p" ).on( "mycustomevent", function( event, myname ) {    $( ).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); 

for code click here

use below code

you need learn event-delegation

event delegation allows attach single event listener, parent element, fire descendants matching selector, whether descendants exist or added in future.

demo

 $( document ).on('click',"button",function () {   $( "p" ).trigger( "mycustomevent", [ "john" ] );  }); 

note : can use nearest static parent selector instead of document.