Question

I have bound 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 bound as below:

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

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.

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 e.stopImmediatePropagation(); but did not worked

Answer 1

I think you want to prevent the event handler bound to [id^="tree"] to be triggered if a .budged element was clicked. In that case you can test where the click event originated from:

$('[id^="tree"]').delegate('.collapsed', 'click', function(e){
    if($(e.target).closest('.budget').length === 0) {
        // not from inside budget element
        var elementId = $(this).attr('id');
        hideChildElement(elementId);
    }
});

Alternatively, if you bind both event handlers to the same element, i.e. both to document or [id^="tree"] or any element in between, event.stopImmediatePropagation() will work just fine.

If this is not what you want, please clarify your question, it is not easy to understand.