Question

In my application I am using styling anchor tags in the same way as buttons. I need to be able to disable buttons, but the anchor tag does not have a disabled attribute. The way around this that I have attempted is by using preventDefault() in the anchor click event like so:

$('a.disabled').click(function (e) {
    e.preventDefault();
});

This is not disabling the link. However, if I simply use the ‘a’ selector $('a').click(function()... it does disable the link. I assume this is something to do with priority of events or event ordering based on the selectors.

Anyone know a way around this??

UPDATE

I have just realied that the above code works if referencing an anchors id in the selector, again this leads me to believe it is something to do with CSS selector priority, i.e. id referenced styles override class styles etc.

Answer 1

I’m guessing you’re setting the disabled class AFTER you’ve bound the click event handler. If your element doesn’t match the selector at the time of binding, it won’t work. In case you want to run your handler in case your element will match your selector in the future, you need to use live().

$('a.disabled').live("click", function(e){
    e.preventDefault();
});