Question

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.

Links get disabled attribute set dynamically AFTER page load. That’s why I’m using .on

Demo here:(New link, forgot to set link to disabled)

http://jsfiddle.net/f5Ytj/9/

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

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

Update:
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 $('someParentElement').on or $('body').on, 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 think is inefficient.

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:

http://jsfiddle.net/f5Ytj/32/

Answer 1

Don’t use event delegation if you only want to listen for clicks on the .btn element itself:

$('.btn').on('click', function() { 
    if (!this.hasAttribute("disabled"))
        alert("test");
});​

If you’d use event delegation, the button would need to be the matching element:

$(someParent).on('click', '.btn:not([disabled])', function(e) {
    alert('test!!');
});​

• Demo

Or use a true button, which can really be disabled:

<button class="btn" [disabled]><span class="file-icon" /> Test</button>

• Demo, disabled.

Here, no click event will fire at all when disabled, because it’s a proper form element instead of a simple anchor. Just use

$('.btn').on('click', function() { 
    if (!this.disabled) // check actually not needed
        this.diabled = true;
    var that = this;
    // async action:
    setTimeout(function() {
        that.disabled = false;
    }, 1000);
});​