jQuery namespace does not bubble which custom event
<p>HTML:</p>

<pre><code>&lt;div class="parent"&gt;
    &lt;div class="child1" &gt;
    &lt;/div&gt;
    &lt;div class="child2"&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;a class="btn1"&gt;customClick.btn1&lt;/a&gt;
&lt;a class="btn2"&gt;customClick.btn2&lt;/a&gt;
</code></pre>

<p>JavaScript:</p>

<pre><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');
    });
</code></pre>

<p>When I click <code>a.btn1</code>, as expected, the <code>customClick.btn1</code> event is handled by <code>div.child1</code> and not <code>div.child2</code>. What is not expected is that the <code>customClick</code> event bubbles and triggers the handlers on <code>div.parent</code> for both <code>customClick.btn1</code> and <code>customClick.btn2</code>. Is this right? Is there any way to have custom events bubble with their namespace? In other words, when <code>customClick.btn1</code> is triggered, not all parent handlers for <code>customClick</code> are handled, just ones that handle <code>customClick.btn1</code>.</p>
