title: Click event handler inadvertently bubbles, even after calling jQuery's stopPropagation()
body: <p>I'm trying to have different delegate click handlers for different elements within "li" elements in a list. Example:</p>
  
  <pre><code>&lt;ul id='myList'&gt;
    &lt;li&gt;
      &lt;p&gt;First item.&lt;/p&gt;
      &lt;button&gt;button1&lt;/button&gt;
      &lt;button&gt;button2&lt;/button&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;p&gt;Second item.&lt;/p&gt;
      &lt;button&gt;button1&lt;/button&gt;
      &lt;button&gt;button2&lt;/button&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>when the user clicks button1 (of any item) I want to grab that event, and stop propagation (same for button2 instances). The user clicking the parent li element would be a different handler:</p>
  
  <pre><code>$('#myList').delegate('li', 'click', function() {
      alert("You clicked a parent &lt;li&gt; item!");
  });
  
  $('#myList').delegate('button', 'click', function(event) {
      event.stopPropagation();
      event.stopImmediatePropagation();
      alert("You clicked a button (but which one?)!");
  });
  </code></pre>
  
  <p>So one issue is, how do I have a delegate for button1 instances, and another for button2 instances? The second delegate in the example above does fire when a button is clicked, but event.stopPropagation() doesn't seem to work as the handler for the parent li item still gets called,</p>
  
  <p>------ Update --------------</p>
  
  <p>Also trying to call event.stopImmediatePropagation(), no effect though, parent handler still being called too.</p>
  
  <p>Thank you</p>