stopPropagation not working as expected

stopPropagation not working as expected

Hello. I cannot get stopPropagation to stop the bubbling. I don't understand why; isn't this what it;s supposed to do? I am expecting that when I click on the "test" element that it will alert ('test clicked') and then stop ('prop failed') from being alerted.


  2. <div id="wrapper">
  3.     <div id="content">
  4.         <div id = "parent">
  5.             <div id="test" class="button">Top Button</div>
  6.         </div>
  7.     </div>
  8. </div>

  1. $('#parent').click(function () {
  2.     alert('prop failed');
  3. });


  6. $('#content').on('click', '.button', function (e) {
  7.     e.stopPropagation();
  8.     alert('test clicked');

  10. });