I have binded event as below:

    $(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');
        }
    });  

Basically this toggles between expand and collapse.

I have another event binded as below:

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

The elements binded 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 binded by second event binding. I want to prevent any events from binding from second event binding to 1st event binding method.

If element A is binded to click event from first event binding and B is binded 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 e.stopImmediatePropagation(); but did not worked