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

Question

I have made on click function for dynamic elements but its not working, Is there a way around it?

$( "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);

For code click here

score 1 · Accepted Answer · answered Jun 03 '15 at 05:18

1

use below code

you need to learn about event-delegation

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

DEMO

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

NOTE : you can use nearest static parent selector instead of document.

answered Jun 03 '15 at 05:18

Nishit Maheta

5,916
3
14
31

yes, I have added in my main file but problem is its working after 2nd click.. – Rupesh Jun 03 '15 at 06:17
check this http://jsfiddle.net/txyLb3Ly/5/ its working fine – Nishit Maheta Jun 03 '15 at 06:27
if I used
Trigger custom event
this instead of "button" element then how to define it? – Rupesh Jun 03 '15 at 06:31
condition is only trigger "btn" and not outside area – Rupesh Jun 03 '15 at 06:33
use can use any tag to assign your custom event – Nishit Maheta Jun 03 '15 at 06:34
see this example http://jsfiddle.net/txyLb3Ly/6/ – Nishit Maheta Jun 03 '15 at 06:35
ohh! .. :) its working – Rupesh Jun 03 '15 at 06:50
ya definitely .. .. but problem is still occur when you check this http://jsfiddle.net/rupesx26/475wz9q1/1/ – Rupesh Jun 03 '15 at 08:40
which problem you face ?? it open pop up on click ? – Nishit Maheta Jun 03 '15 at 09:02
on 1st click modal not open http://jsfiddle.net/rupesx26/475wz9q1/1/ please check – Rupesh Jun 03 '15 at 10:51
check by uncomment alert .. it working your pop up us not opeaning – Nishit Maheta Jun 03 '15 at 10:55

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

1 Answers1