title: Delegated event triggering even when it shouldn't
body: <p>I have the following code:</p>
  
  <pre><code> // Define controls
  $('.play-video').click(function(){
      // Get the video element
      var video = $(this).parent().parent().find('video');
      // Play the video
      $(video).get(0).play()
  
      // Remove the play class and add the pause class so the same button will pause the video
      $(this).removeClass('play-video');
      $(this).addClass('pause-video');
  
      // Set pause text
      $(this).text('Pause');
  });
  
  
  
  $(document).on('click','.pause-video',function(){
      console.log('pausing...');
      // Get the video element
      var video = $(this).parent().parent().find('video');
      // Play the video
      $(video).get(0).pause()
  
      // Remove the play class and add the pause class so the same button will pause the video
      $(this).removeClass('pause-video');
      $(this).addClass('play-video');
  
      // Set pause text
      $(this).text('Play');
  });
  </code></pre>
  
  <p>Problem is, that the second click event should trigger on <pre>.pause-video</pre> only but also triggers on <pre>.play-video</pre></p>
  
  <p>Question is: What did I do wrong?</p>
  
  <p>Thanks in advance,
  G3</p>