jQuery replacing element id, but it is not recognized later on.

Question

I have a play button, along with a forward button.

The HTML is thus:

<div id="control">
    <a href="#" id="pause"></a>
    <a href="#" id="next"></a>
</div>

What I want is when someone clicks pause, a play icon comes up, and when they click play, the pause icon comes up again. Now this can be done with toggle, but I also need the play icon to come up when someone clicks next, and the pause icon to come up when they click on the play icon. Toggle does not work for this.

Here is my jQuery, and obviously, because of the nature of javascript, this doesn't work. (The added attribute play is not recognized)

What is a good solution for what I'm trying to do?

// Play/pause is clicked, alternate between starting and stopping the interval 

$('#pause').click(function(event) {
    $(this).css("background-image", "url(../images/controls_play.png)");
    $(this).attr('id', 'play');
});

$('#play').click(function(event) {
    $(this).css("background-image", "url(../images/controls_pause.png)");
    $(this).attr('id', 'pause');
});


$('#next').click(function(event) {
    $('#pause').css("background-image", "url(../images/controls_play.png)");
    $('#pause').attr('id', 'play'); 
});

Answer 1

You can use .delegate() for your play/pause handler, like this:

$('#control').delegate("#pause", "click", function(event) {
    $(this).css("background-image", "url(../images/controls_play.png)")
           .attr('id', 'play');
}).delegate("#play", "click", function(event) {
    $(this).css("background-image", "url(../images/controls_pause.png)")
           .attr('id', 'pause');
});

You can test it out here. Now instead of finding controls with the matching IDs when the page loads, this listens for the click event and checks the ID at the time of the event, which will give you the desired effect of the action changing. Note that this is more efficient than .live() since you know exactly where the elements are.

Answer 2

Try the .live('click', function(){});

$('#pause').live('click', function(event) {
    $(this).css("background-image", "url(../images/controls_play.png)");
    $(this).attr('id', 'play');
});

You can try another approach. Bind the event to a class, then change the id. Then test the id before doing anything

Answer 3

I think the click events are not attaching when you change the ID try live or delegate

$('#pause').live("click", function(event) {
    $(this).css("background-image", "url(../images/controls_play.png)");
    $(this).attr('id', 'play');
});

$('#play').live("click",function(event) {
    $(this).css("background-image", "url(../images/controls_pause.png)");
    $(this).attr('id', 'pause');
});


$('#next').live("click",function(event) {
    $('#pause').css("background-image", "url(../images/controls_play.png)");
    $('#pause').attr('id', 'play'); 
});

Answer 4

What you could try doing is instead of referencing play or pause, you reference control and set the HTML inside of control based on what's been clicked. You would also differentiate between play and pause via classes. So for example you would have something like...

$('#control').click(function(event) {
    if($(this).attr('class') == 'play') {
        $(this).css("background-image", "url(../images/controls_pause.png)");
        $(this).attr('class', 'pause');
    }
    if($(this).attr('id') == 'pause') {
        $(this).css("background-image", "url(../images/controls_play.png)");
        $(this).attr('class', 'play');
    }
});

$('#next').click(function(event) {
    $('#control').css("background-image", "url(../images/controls_play.png)");
    $('#control').attr('id', 'play'); 
});

You could also save yourself a few lines of code by assigning the background images to the classes, so you wouldn't need the lines that say .css('background-image', 'x.gif') as those properties would be in your CSS.

Answer 5

You could use data to store the state of the button. So to set the status of the button as play use:

$("#playPause").css("background-image", "url(../images/controls_play.png)").data("state","play");

then to get the state of the button you just do:

$("#playPause").data("state");

so on click you do:

$("#playPause").click(function(event) {
    var state = $("#playPause").data("state");
    if(state === "play"){
      $("#playPause").css("background-image",    "url(../images/controls_pause.png)").data("state","pause");
    }
    else {
       $("#playPause").css("background-image", "url(../images/controls_play.png)").data("state","play");
    }
});

and when next is clicked:

$('#next').click(function(event) {
    $("#playPause").css("background-image", "url(../images/controls_play.png)").data("state","play");
});