JQuery Toggle Issue, Requires Two Clicks

Question

I'm Not too Fluent in Javascript but I managed to alter this code and make it toggle between the Play button and the Pause Button for a song... it goes like so:

    $(function()
    {
       $("#plbutton").toggle(function()
       { 
            $("#playit").hide();
            $("#pauseit").show();
       },

       function()
       { 

       });
    });

    $(function() 
    {
       $("#pabutton").toggle(function()
       { 
            $("#pauseit").hide();
            $("#playit").show();
       },

       function()
       {

       });
    });

This is the HTML:

    <span id="playit"><a href="javascript:void(0)" onclick="document.getElementById('WeFuckinBall').play()" id="plbutton"><img src="images/playbutton.png" /></a></span>
    <span id="pauseit" ><a href="#" onclick="document.getElementById('WeFuckinBall').pause()" id="pabutton"><img src="images/pausebutton.png" /></a></span>

and this is the css for the pause span:

    #pauseit{
        display: none;}

Now When I Click the Play Button It switches to the Pause Button, then When I Click the Pause Button it Switches to the Play but after that It requires TWO Clicks in order to work... It'll pause/play the song but the image wont toggle till you click again...

I tried looking around but due to my minimal knowledge of java and jquery I wasn't able to apply the fixes to my code...

Why do you have jQuery AND inline script? Move the inline script to the toggle and call e.preventDefault() - you reload the page onclick of the pause button — mplungjan, Feb 25 '12 at 15:54
What you are trying to do is very simple, I'd advise you take a day out and read up on simple jQuery. http://www.w3schools.com/jquery/jquery_intro.asp — AlexKempton, Feb 25 '12 at 15:56
And perhaps first read http://w3fools.com/ and then go to jquery.com instead — mplungjan, Feb 25 '12 at 16:06

mariogl · Answer 1 · 2012-02-25T16:15:12.087

2

Try this:

$(document).ready(function() {
    $("#plbutton").on("click", function(e)
    { 
        e.preventDefault();
        $("#playit").hide();
        $("#pauseit").show();
    });
    $("#pabutton").on("click", function(e)
    { 
        e.preventDefault();
        $("#pauseit").hide();
        $("#playit").show();
    });
});

edited Feb 25 '12 at 16:15

answered Feb 25 '12 at 15:57

mariogl

1,195
1
10
24

I tried it but it didn't work, would it have to be within the function? – user1232698 Feb 25 '12 at 16:13
OP has his play/pause code inside the markup, I guess because the id is dynamic, that's because I didn't moved it to my code. Of course it's better not to have inline javascript, but then the code would need more changes, and it's not what OP has asked. – mariogl Feb 25 '12 at 16:54

score 1 · Accepted Answer · answered Feb 25 '12 at 16:03

1

If you use links, add e.preventDefault();

if not this should work

<span id="playit"><img src="images/playbutton.png" /></span>
<span id="pauseit"><img src="images/pausebutton.png" /></span>


$(document).ready(function() {
  $("#playit").on("click", function(e) {
    $("#$WeFuckinBall").play() 
    $(this).hide();
    $("#pauseit").show();
  });
  $("#pauseit").on("click", function(e) { 
    $("#WeFuckinBall").pause() 
    $(this).hide();
    $("#playit").show();
  });
});

You can even leave out the span

answered Feb 25 '12 at 16:03

mplungjan

169,008
28
173
236

for some reason it's not toggling between the play and pause button no more – user1232698 Feb 25 '12 at 16:16
where would i add the e.preventDefault(); btw? to the function? – user1232698 Feb 25 '12 at 16:18
nvm I see what you meant with mariogl's example, thank you so much for your help! – user1232698 Feb 25 '12 at 16:22
You only need the preventDefault if you keep the link – mplungjan Feb 25 '12 at 16:23
toggle(); first hides a div and then shows it. So if the div is already hidden then on the first click toggle seems to do nothing. From second click it starts working properly. Actually it always works properly. I am not able to figure out what to do so that toggle shows the div first. If anyone can answer this hats off to him!! – Prakash Patil Aug 03 '17 at 11:56
The toggle you might think of is no longer supported by jQuery https://stackoverflow.com/questions/14301935/where-has-fn-toggle-handlereventobject-handlereventobject-gone – mplungjan Aug 03 '17 at 13:32

dku.rajkumar · Answer 3 · 2012-02-25T16:12:36.663

1

the simplest code i can think of is

HTML:

<span id="playit"><img src="images/playbutton.png" /></span>
<span id="pauseit" ><img src="images/pausebutton.png" /></span>

JQUERY:

var elems = $("#playit,#pauseit")
elems.on("click", function(){ 
    elems.toggle();
    if($(this).attr('id') == 'playit'){
       $('#WeFuckinBall').play();
    }else{
       $('#WeFuckinBall').pause();
    }
});

edited Feb 25 '12 at 16:12

answered Feb 25 '12 at 16:07

dku.rajkumar

18,414
7
41
58

how would the span be clickable without a anchor? – user1232698 Feb 25 '12 at 16:17
same as a div... when you click on it, the event is listened by the event listener function.. – dku.rajkumar Feb 25 '12 at 16:21
Seems the answers starts looking more an more like my suggestions – mplungjan Feb 25 '12 at 16:28

score 0 · Answer 4 · answered Feb 25 '12 at 15:55

0

You dont need toggle, simply using .click() will solve your problem:

$(function()
{

$("#plbutton").click(function()
{ 
        $("#playit").hide();
        $("#pauseit").show();
});

$("#pabutton").click(function()
{ 
        $("#pauseit").hide();
        $("#playit").show();
}

});

answered Feb 25 '12 at 15:55

linuxeasy

6,269
7
33
40

Why use 2 document.ready handlers? I've never seen anyone do that before. – Reinstate Monica Cellio Feb 25 '12 at 15:58
@Archer: I am just solving the problematic area of the code, rather than confusing the user anymore. How to write a good javascript/Jquery code, I leave it to user to learn by experience. – linuxeasy Feb 25 '12 at 15:59
1

@Archer: Yup, I accept it, and removed the duplication in the code, thanks for pointing out :) – linuxeasy Feb 25 '12 at 16:01
I tried this also but It wouldn't toggle at all between the play and pause span... – user1232698 Feb 25 '12 at 16:19

JQuery Toggle Issue, Requires Two Clicks

4 Answers4

Linked