title: jquery unbind or off click event handler within specific parent
body: <p>I have 3 buttons, and all of them have event handlers on click.</p>
  
  <p>If a button is within a specific parent, then there should be no click event on the button. But rather, a click event should exist at that specifc parent level itself.</p>
  
  <p>In the code below, on clicking the button within <code>.case2</code>, I was expecting the alert to show "case2 parent clicked", but it still shows the alert "button clicked".</p>
  
  <p>Why is that happening ? And how do I correct it ?</p>
  
  <p>Thanks.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    $('.button').on('click', function (e) {
          alert('button clicked');
          e.stopPropagation();
      });
  
  
      $('.case2')
              .off('click', '.button', function (e) {
                  e.stopPropagation();
              })
              .on('click', function (e) {
                  alert('case2 parent clicked');
                  e.stopPropagation();
              });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.case1, .case2, .case3 {
    margin:1em;
    padding: 1em;
    background-color: #0b97c4;
    width: 5em;
    height:2em;
  }
  
  .button {
    padding: 1em;
    background-color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="case1"&gt;
      &lt;div class="button"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="case2"&gt;
      &lt;div class="button"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="case3"&gt;
      &lt;div class="button"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>