Html code

<div class="parent">

<div class="child1" >

</div>

<div class="child2">

</div>

</div>

<a class="btn1">customClick.btn1</a>

<a class="btn2">customClick.btn2</a>

jQuery code

jQuery('div.child1')

.bind('customClick.btn1', function () {

alert('child1 reacted to customClick.btn1');

});

jQuery('div.child2')

.bind('customClick.btn2', function () {

alert('child2 reacted to customClick.btn2');

});

jQuery('div.parent')

.bind('customClick.btn1', function (e) {

alert('parent reacted to customClick.btn1');

})

.bind('customClick.btn2', function (e) {

alert('parent reacted to customClick.btn2');

});

jQuery('a.btn1')

.click(function(){

jQuery('div.child1').trigger('customClick.btn1');

});

jQuery('a.btn2')

.click(function(){

jQuery('div.child2').trigger('customClick.btn2');

});

When clicking a.btn1, as expected, the customClick.btn1 event is handled by div.child1 and not div.child2. What is not expected is that the 'customClick' event bubbles and triggers the handlers on div.parent for both 'customClick.btn1' and 'customClick.btn2'. Is this right? Is there anyway to have custom events only bubble the event with the namespace that was triggered. In other words, when 'customClick.btn1' is triggered, not all parent handlers for 'customClick' are handled, just ones that handle 'customClick.btn1'