Jquery Toggle Issue, Requires Two Clicks

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()

Solution 1:

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();
    });
});

Solution 2:

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

if not this should work

<span id="playit"><imgsrc="images/playbutton.png" /></span>
<spanid="pauseit"><imgsrc="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

Solution 3:

the simplest code i can think of is

HTML:

<spanid="playit"><imgsrc="images/playbutton.png" /></span><spanid="pauseit" ><imgsrc="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();
    }
});

Solution 4:

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();
}

});