Prevent event from parent element to child element in jquery
<p>I have bound event as below:</p>

<pre><code>    $(document).delegate('.budget', 'click', function(e){
        if ($(this).hasClass('collapsed')) {
           $(this).removeClass('collapsed');
           $(this).addClass('expanded');
        }
        else if ($(this).hasClass('expanded')) {
           $(this).removeClass('expanded');
           $(this).addClass('collapsed');
        }
    });  
</code></pre>

<p>Basically this toggles between expand and collapse.</p>

<p>I have another event bound as below:</p>

<pre><code>    $('[id^="tree"]').delegate('.collapsed', 'click', function(e){
        var elementId = $(this).attr('id');
        hideChildElement(elementId);
    });
</code></pre>

<p>The elements bound by the second event binding are parents of elements binded by first event binding.
What happens is that on clicking on the element from the first binding event method also triggers the event bound by second event binding.
I want to prevent any events from binding from second event binding to 1st event binding method. </p>

<p>If element A is bound to click event from first event binding and B is bound to second event binding (A is inside B or A is child of B), I dont want any event of B to propagate to A. 
Note I tried <code>e.stopImmediatePropagation();</code> but did not worked</p>
