I'm trying to filter button events based on whether they have a CSS class assigned to them or not.

Assume I have a button like this:

<button id="save-button" class="ui-state-default ui-corner-all">Save</button>

I want to get jQuery to select all buttons that currently do not have a class of "ui-state-disabled". The selector I'm using looks like this:

$('#save-button:not(.ui-state-disabled)').click(function() {
   ...
});

When the button is clicked, I'll call a different function, do some stuff and then add the class 'ui-state-disabled' to the button. However the button still continues to accept click events.

I'm guessing this is because of two possible causes:

1. The event binder looks only at the initial state when binding the click event and doesn't recognise that a new class has been added later on
2. My filter ['... :not(.ui-state-disabled)] is not correct

Any observations?