Resetting a jQuery function?

Question

I have jQuery animating a div with an embedded YouTube video in it.

I have it set so that when you close the video, the div hides and the movie stops. However, if I want to get the movie back I can't.

I was wondering if there was a callback that could reset the chain of events?

This is the jQuery I'm using:

$("#trigger2").click(function () {
    $( "#movie" ).animate({bottom: 0}, {duration:1000});
    $(".close").delay(1500).fadeIn('slow')
});
$(".close").click(function () {
    $("#movie").hide();
    var $player = $("#movie").detach();
});

Answer 1

$("#movie").detach(); is removing #movie from the DOM, so you can't show it again. if you can't stop the video player in another way, keep detach, and append it to show it.

jQuery:

$("#trigger2").click(function () {
    var movdiv = "<div id='movie'><p>movie box</p><a class='close'>Close</a></div>";
    $(movdiv).appendTo("body").animate({bottom: 0}, {duration:1000});
    $(".close").delay(1500).fadeIn('slow');
    $(".close").click(function () { $("#movie").detach(); });
});

Fiddle: http://jsfiddle.net/D4rXa/

Answer 2

You can't, The only way to get it back would be to reinitialize your div(with video) the way you initialized it first.

You can try appending your player that way - (after detaching) - .detach()

 var p;
 $(".close").click(function () {
        $("#movie").hide();
         p = $("#movie").detach();
 });

attach player again into DOM

p.appendTo('body');