title: jQuery event listener fires before selector applied?
body: <p>I'm stuck on some event listeners. When one element is clicked I want to create another listener for clicks. For some reason they are both firing. Here's the code and a jsbin: <a href="http://jsbin.com/uHIyiGi/2/edit" rel="nofollow">http://jsbin.com/uHIyiGi/2/edit</a>
  HTML</p>
  
  <pre><code>&lt;div class="wrap"&gt;
   &lt;button&gt;Click me&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$('button').on('click', function(event){
    $('body').append('&lt;p&gt;button clicked&lt;/p&gt;');
    $('.wrap').addClass('clicked');
  
    $('body').on('click', '.clicked', function(e){
      $('body').append('&lt;p&gt;.clicked clicked&lt;/p&gt;');
      $('.wrap').removeClass('clicked');
      $('body').off('click', '.clicked');
    });
  });
  </code></pre>
  
  <p>From what I understand about event listeners, the second one should not fire until the '.clicked' element has a complete click event (a mouse down and mouse up), but it fires on the first click, meaning the event is fired even though the element doesn't have the trigger class until after the event. I'm seeing the event listener successfully removed each time, but it's called before I think it should be called. SO, I'm really confused now... any suggestions? I'm hoping I have a face palm in my near future. </p>