Click and freeze event conflict on one item

Question

I have a “button” update (actually a png image) that the user can move over with the mouse cursor, turning it from gray to blue. When you click on the update, the image changes to the "button" playback, which exhibits a similar character of color change, except when you click on the playback image, it should return to the original updated image.

The problem is that after clicking on the updated image, when I click on the playback image without removing the mouse from the image, it does not return to the updated image.

I have already considered stopping the propagation of events.

Here is my code:

$('#refresh').click(function (event) {
    if (!tMinusZero) {
        $('#refresh').html("<img src='play_small_hover.png'>");
        tMinusZero = true;
        event.stopImmediatePropagation();
    } else {
        $('#refresh').html("<img src='refresh_small_hover.png'>");
        tMinusZero = false;(
        event.stopImmediatePropagation();
    }
});

$('#refresh').hover(function () {
    if (!tMinusZero) {
        $('#refresh').html("<img src='refresh_small_hover.png'>");
    } else {
        $('#refresh').html("<img src='play_small_hover.png'>");
    }
}, function () {
    if (!tMinusZero) {
        $('#refresh').html("<img src='refresh_small.png'>");
    } else {
        $('#refresh').html("<img src='play_small.png'>");
    }
});

Some interesting things that I noticed while trying to debug:

• #refresh, "", .
• .
• , , div, div, .
• div .
• , , , , , div.
• , , , , .

, , , , .

Answer 1

CSS, , , DIV , , , script

- : CSS:

#refresh[data-state=notclicked]
{
background-image:url('play_small.png');
cursor:pointer;
}
#refresh[data-state=notclicked]:hover
{
background-image:url('play_small_hover.png');
cursor:pointer;
}
#refresh[data-state=clicked]
{
background-image:url('refresh_small.png');
cursor:pointer;
}
#refresh[data-state=clicked]:hover
{
background-image:url('refresh_small_hover.png');
cursor:pointer;
}

, CSS, width.height, png.

js:

$("#refresh").click(function(){
if ($(this).attr('data-state')=='clicked') {$(this).attr('data-state','notclicked');}
else  {$(this).attr('data-state','clicked');}
});

Answer 2

, , , , , , click ( ) .

tMinusZero = false;(

,

$('#refresh') 

$(this)

, dom, .