Perform different actions with a button based on the data attribute

Question

I have one button. His first action is to stop a video. Then it's icon change and data-status too. His second action is to reload the page.

The problem is that I can't do the second even if I code some conditions. Sometimes it don't do anything, sometimes the second action comes at the same time of the first one.

Here is my Jquery code:

// STOP VIDEO (ACTION 1)
$("#button").click(function(){
    $('#button').attr({
        src: 'img/film.png',
        'data-status':'stop'
    });
}); 

// RELOAD (ACTION 2)
$("#button[data-status='stop']").click(function() {
    location.reload();
});

// OTHER METHOD FOR RELOAD (ACTION 2)
if ($("#button").data( "status", "stop" )) {
    $("#button").click(function() {
        location.reload();
    });
}

Here is my HTML code:

<img id="button" src="skip.png" data-status="play">

Can you help me?

Stephan Muller · Accepted Answer · 2016-06-07 19:53:22Z

3

By binding the click event multiple times, you're firing both the functions on the second click. Instead, you should put the logic that decides to stop/reload inside the one event callback:

$("#button").click(function(){
    var button = $(this);

    if(button.attr('data-status') === 'stop') {
        // Already stopped
        location.reload();

    } else {
        // Stop
        button.attr({
            src: 'img/film.png',
            'data-status':'stop'
        )};
    }
)};

edited Jun 7, 2016 at 19:53

answered Jun 7, 2016 at 19:42

Stephan Muller

27.7k18 gold badges88 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Perform different actions with a button based on the data attribute

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related