Prevent icon inside disabled button from triggering click?
<p>Trying to figure out proper way to make a click event not fire on the icon of a disabled link.  The problem is when you click the Icon, it triggers the click event.  I need the selector to include child objects(I think) so that clicking them triggers the event whenever the link is enabled, but it needs to exclude the children when the parent is disabled.</p>

<p><strong>Links get disabled attribute set dynamically AFTER page load.  That's why I'm using .on</strong></p>

<p>Demo here:<strong>(New link, forgot to set link to disabled)</strong></p>

<p><a href="http://jsfiddle.net/f5Ytj/9/" rel="nofollow">http://jsfiddle.net/f5Ytj/9/</a></p>

<pre><code>&lt;div class="container"&gt;
    &lt;div class="hero-unit"&gt;
        &lt;h1&gt;Bootstrap jsFiddle Skeleton&lt;/h1&gt;
        &lt;p&gt;Fork this fiddle to test your Bootstrap stuff.&lt;/p&gt;
        &lt;p&gt;
            &lt;a class="btn" disabled&gt;
                &lt;i class="icon-file"&gt;&lt;/i&gt;
                Test
            &lt;/a&gt;
        &lt;/p&gt;
    &lt;/div&gt;
&lt;/diV&gt;​

$('.btn').on('click', ':not([disabled])', function () { alert("test"); });​
</code></pre>

<p><strong>Update:</strong>
I feel like I'm not using .on right, because it doesn't take the $('.btn') into account, only searching child events.  So I find myself doing things like <code>$('someParentElement').on</code> or <code>$('body').on</code>, one being more difficult to maintain because it assumes the elements appear in a certain context(someone moves the link and now the javascript breaks) and the second method I <em>think</em> is inefficient.</p>

<p>Here is a second example that works properly in both enabled/disabled scenarios, but I feel like having to first select the parent element is really bad, because the event will break if someone rearranges the page layout:</p>

<p><a href="http://jsfiddle.net/f5Ytj/32/" rel="nofollow">http://jsfiddle.net/f5Ytj/32/</a></p>
