function call from JQuery Event handler

Question

I am new to JQuery. I have searched previous posts but couldn't find anything. I am trying to do call another function from Video Ended Event handler. its not working.

$(document).ready(function(){
   // doing something
   $("#video1").bind("ended", NextFrag());
});

function NextFrag(){
   Window.alert("Hello World");
}

This is not working. I cannot see any alert printing "Hello World".

Basically I need to solve the above problem to do the following task. I want to play different fragments of video. The algorithm should be something like this:

$(document).ready(function(){
   NextFrag();
});

function NextFrag(){

   // IF First FRAGMENT do this
      $("#video1").html('<source src="FirstURLFromArray.mp4" type="video/mp4"></source>' );

    // ELSE DO THIS
      $("#video1").bind("ended", function(){
         $("#video1").html('<source src="NextURLFromArray.mp4" type="video/mp4"></source>' );
         NextFrag();    // call itself again.       
      });
}

Any help will be very appreciated. Thanks,

$( "#video1" ).bind( "ended", NextFrag ); Ditch the parens. You want to bind the function, not invoke it immediately. — Šime Vidas
– Šime Vidas, Commented Dec 25, 2012 at 19:31
Stupid me. You both are right. Many thanks. its working now. — smaj08r
– smaj08r, Commented Dec 25, 2012 at 19:49

Dogbert · Accepted Answer · 2012-12-25 19:35:22Z

3

Try

$("#video1").bind("ended", NextFrag);

This will pass the function as a callback, instead of evaluating it.

answered Dec 25, 2012 at 19:35

Dogbert

224k43 gold badges419 silver badges416 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Šime Vidas Over a year ago

Strictly speaking, the function will already have been evaluated at that point. A function invocation evaluates the function's body, but the function itself is evaluated when its function object is crated (in this case, when the function declaration is evaluated).

smaj08r Over a year ago

I just completed the task and posted the final code (oops!!!! I can't answer my own question for 8 hours - I will do it tomorrow). Many thanks for your help. I am not sure if you can help me get some points.

Talha Akbar · Accepted Answer · 2012-12-25 19:36:48Z

2

$(document).ready(function(){
   $("#video1").on("ended", function() {
    NextFrag();
   });
});

function NextFrag(){
   alert("Hello World");
}

answered Dec 25, 2012 at 19:36

Talha Akbar

10.1k7 gold badges41 silver badges62 bronze badges

1 Comment

smaj08r Over a year ago

I actually need to load first video before using the ended event handler. Many thanks for your reply.

smaj08r · Accepted Answer · 2012-12-28 15:09:21Z

0

Thanks for your help. I just completed the task. I did something like this and it is working.

var index = 0;
$(document).ready(function(){
NextFrag();
});  

function NextFrag(){
if (index < url.length){
    if(index == 0 )
    {
        //The only difference for index=0 is that the player is not autoplay  
        $("#video1").html('<source src= " '+ url[index] + '" type="video/mp4"></source>' );
        index++;
        $("#video1").bind( "ended", NextFrag);

    }else
    {
         $("#VideoContainer").html('<video  id="video1" controls autoplay > "<source src= "'+ url[index]+ '" type="video/mp4"></source> </video>' );
         index++;
         $("#video1").bind( "ended", NextFrag);
    } 
}
}

answered Dec 28, 2012 at 15:09

smaj08r

2293 silver badges7 bronze badges

Collectives™ on Stack Overflow

function call from JQuery Event handler

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related