SO fiddle

Test Fiddle mainly for SO Questions

by metalculus84

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/overcast/jquery-ui.css">
<div id="content">
    <div class="parent">
        <div class="child1" >
        </div>
        <div class="child2">
        </div>
    </div>
    
    <a class="btn1" href="#">customClick.btn1</a>
    <a class="btn2" href="#">customClick.btn2</a>
</div>

JavaScript

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('#content 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('#content div.child1').trigger('customClick.btn1');
});

jQuery('a.btn2').click(function() {
    jQuery('#content div.child2').trigger('customClick.btn2');
});