Question

I need this code to run again after the $('.mp3').show(); is executed.

$('.mp3').click(function() {
    $(this).toggle(function() {
        $('object').remove();
        $('.mp3-0').show();
    });
});

$('.mp3-0').click(function() {
    $(this).toggle(function() {
        $('#mp3obj').replaceWith('<object width="0" height="0"> <param name="src" value="musicasite.mp3"> <param name="autoplay" value="false"> <param name="controller" value="true"> <param name="bgcolor" value="#FFFFFF"> <embed src="musicasite.mp3" autostart="false" loop="false" width="0" height="0" controller="true" bgcolor="#FFFFFF"></embed> </object>');
        $('.mp3').show();
    });
});​

What this whole snippet is doing for me is removing a song from the website when the user requests, but if this user wants it back then the music plays again.

But, after the code runs all this long it just stops working.

What I need is: the whole HTML file needs to be set as it was before the button was clicked and the code ran.

—– edit ——

An example can be seen here: http://dev.webtoad.com.br/toquedemagica/2012/
The page is in brazilian portuguese, but if you click on ‘Parar música’ and ‘Tocar música’ you can see what I have achieved so far.

Answer 1

You are making two big mistakes:

1. You’r not using toggle right. You want to toggle just the button visibility not the button behavior. That should be $(this).toggle() and then the rest of the actions outside of the toggle function. As you are clicking on two different buttons thought, there’s not even much sense in using toggle at all, as it could get you into unexpected show/hide behaviors.

2. On the .mp3-0 click (the second click) you want to (re-)add the <object> you removed in the previous click back inside the #mp3obj, not replace it. This is why the code only runs 3 click;

STOP – removes the <object>.

START – replaces #mp3obj with the <object>.

STOP – removes the <object> again.

START – …can’t find #mp3obj to replace with <object> (you replaced it!) – function stops working…

Try this instead:

$('.mp3').click(function() {
    $(this).hide();
    $('object').remove();
    $('.mp3-0').show();
});

$('.mp3-0').click(function() {
    $(this).hide();
    $('#mp3obj').html('<object width="0" height="0"> <param name="src" value="musicasite.mp3"> <param name="autoplay" value="false"> <param name="controller" value="true"> <param name="bgcolor" value="#FFFFFF"> <embed src="musicasite.mp3" autostart="false" loop="false" width="0" height="0" controller="true" bgcolor="#FFFFFF"></embed> </object>');
    $('.mp3').show();
});​