title: jquery stop delegated event from being called twice
body: <p>My JS looks something like this</p>
  
  <pre><code>$(document).ready(function(){
      menuClickHandler();
  });
  </code></pre>
  
  <p>I have ajax based menu, <code>menuClickHandler</code> is used to make it work and resides in a separate JS file. <code>menuClickHandler</code> associates other functions that are associated to menu item. On click of menu item it calls a function associated with the menu item. Lets say I have menu item <code>Jump</code> and a function <code>JumpHandler</code> associated with it. Within <code>JumpHandler</code> there is one simple function as follows</p>
  
  <pre><code>functionA() {
      $("div.tree").on("click", ".branch", function(event) {
          event.stopPropagation();
          //some code
      });
  }
  </code></pre>
  
  <p>Scenario:
  When the page is first loaded everything is fine, when I click on <code>Jump</code> <code>functionA' gets called and everything works fine. Now if click some other menu item and then click on</code>Jump<code>again,</code>JumpHandler<code>is called again and hence</code>functionA` gets called again resulting in click event on branch being bound twice. Can anyone tell me how do I remove/undelegate the delegated click event so that there is only click event bound to branch.</p>
  
  <p><strong>jQuery version: v2.1.1</strong></p>