jQuery: Event Bubbling and how "click", "live.click", "stopPropagation", and "return false" work together
<p>I will have couples scenario here. Please help me</p>

<p>Here is the base case: <a href="http://jsfiddle.net/2zsLy/9/" rel="nofollow">http://jsfiddle.net/2zsLy/9/</a></p>

<p>When I click <code>Click Me</code>, both alert box and <code>Another Paragraph</code> come out. This is expected since the click event bubble up to the parent container, which is <code>body</code>. <strong>Now start my questions</strong></p>

<p>1) <a href="http://jsfiddle.net/2zsLy/10/" rel="nofollow">http://jsfiddle.net/2zsLy/10/</a></p>

<p>How come adding <code>return false</code> to my <code>live.click</code> does not stop the click event from bubble up. From the example, the live.click bubble up and trigger the alert box. I thought the documentation said that return false will stop the live event from bubble.</p>

<p>2) <a href="http://jsfiddle.net/2zsLy/11/" rel="nofollow">http://jsfiddle.net/2zsLy/11/</a></p>

<p>Now, I change the click event in <code>body</code> to <code>live.click</code> and it fix the problem -> the click event does not bubble up (hence no alert box is shown). Why does <code>live.click</code> work and <code>click</code> does not. </p>

<p>3) <a href="http://jsfiddle.net/2zsLy/13/" rel="nofollow">http://jsfiddle.net/2zsLy/13/</a></p>

<p>I think the documentation clearly said that calling <code>event.stopPropagation()</code> will not stop the bubbling up from occurring, well I just did. I use <code>event.stopPropagation()</code> expecting that it will still trigger my alert box, but it does not. Why?</p>

<p><strong>NOTE</strong>: for the answer of the first two question, see <code>justkt</code> answers. For the answer to the last question, see <code>Squeegy</code> answer and <strong>his reply</strong>.</p>
