JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
<div class="parent">
    <div class="child">
        Test
    </div>
</div>

<a class="btn-a" href="#">trigger a</a>
<a class="btn-b" href="#">trigger b</a>
<a class="btn-c" href="#">trigger c</a>
</div>

JavaScript

jQuery('#content div.child')
    .bind('a.a',function(){alert('a-child');})
    .bind('b.a',function(){alert('b-child');})
    .bind('c.a',function(){alert('c-child');});


jQuery('#content div.parent')
    .bind('b.a',function(){alert('b-parent');})
    .bind('c.a',function(){alert('c-parent');});


jQuery('a.btn-a')
    .click(function(){
         jQuery('#content div.child').trigger('a.a');
     });


jQuery('a.btn-b')
   .click(function(){
       jQuery('#content div.child').trigger('b.a');
   });


jQuery('a.btn-c')
    .click(function(){
        jQuery('#content div.child').trigger('c.a');
    });