title: Perform different actions with a button based on the data attribute
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>Here is my Jquery code:</p>
  
  <pre><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();
      });
  }
  </code></pre>
  
  <p>Here is my HTML code:</p>
  
  <pre><code>&lt;img id="button" src="skip.png" data-status="play"&gt;
  </code></pre>
  
  <p>Can you help me?</p>