title: Event listener three levels (from parent to grandchild)
body: <p>I am experiencing some issues when attaching event listener to a grandchild.</p>
  
  <p>Both parent click and child click works as expected, only grandchildren clicks won't fire.</p>
  
  <p><strong>Here is my current code:</strong></p>
  
  <pre><code>/* Parent */
  $('body').on('click', 'div.left-menu-item', function (e) {
      e.preventDefault();
  
      console.log('parent'); // &lt;-- this works
  });
  
  /* Child */
  $('body').on('click', 'div.left-menu-item div.dropdown', function(e){
      e.stopPropagation();
      e.stopImmediatePropagation();
  
      console.log('child'); // &lt;-- this works
  });
  
  /* Grandchild */
  $('body').on('click', 'div.left-menu-item div.dropdown-menu.show a.edit', function(e){
      e.stopPropagation();
      e.stopImmediatePropagation();
  
      console.log('grandchild'); // &lt;-- this does NOT work
  });
  </code></pre>
  
  <p>Markup for the button were the issue is:</p>
  
  <pre><code>&lt;a class="btn edit" data-unsp-sanitized="clean"&gt;
      &lt;i class="fas fa-fw fa-pen"&gt;&lt;/i&gt; &lt;span&gt;Edit&lt;/span&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>I've also tried setting the grandchild eventlistener to:</p>
  
  <pre><code>$('body').on('click', 'a.edit', function(e){
      console.log('grandchild'); &lt;-- this doesnt work either
  });
  </code></pre>
  
  <p><strong>New update.</strong></p>
  
  <p>I added a click listener with wildcard so I can listen to all clicks:</p>
  
  <pre><code>$('body').on('click', '*', function(e){
      console.log('clicked');
  });
  </code></pre>
  
  <p>A total of 20 clicks are triggered, but when I click on .edit no clicks are detected still.</p>
  
  <p>If I trigger click manually <code>$('.edit').trigger('click');</code> it works..</p>