title: jQuery stopPropagation not stopping click through
body: <p>I have a panzoom plugin that is working well. When I click on <code>var elem</code> it adds a small div <code>cp_select</code> in the correct location. Then, when I click on that newly created <code>cp_select</code> div, it removes that div. So you can add and remove it accordingly. However, when I click on the <code>cp_select</code> div, it removes it then immediately adds it back in because the click is propagating through. I have tried event.stopPropagation() and event.stopImmediatePropagation() with no luck. Any ideas how to prevent the <code>cp_select</code> firing the <code>map_click(e)</code>?</p>
  <p><a href="https://i.stack.imgur.com/XeRI0.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XeRI0.gif" alt="enter image description here" /></a></p>
  <pre><code>window.panzoom = panzoom(elem, {
          onClick(e)     {
              map_click(e);
          }
  })
  
  
  function map_click(e) {
      
      $(&quot;.map_cont&quot;).prepend('&lt;div class=&quot;cp_select&quot; style=&quot;left:'+calc_x+'px ;top:'+calc_y+'px&quot;&gt;&lt;/div&gt;');
  
  }
  
  
   $('body').on('click', '.cp_select', function(event) {
      
      event.stopImmediatePropagation()
      $(this).remove()
      return false;
      
  });
  </code></pre>