Question

I have a button which by default is disabled. After I select an item from jQuery UI Autocomplete, I want to enable the button.

I’m testing if this works by using an alert on the button:

jQuery('#btn').live('click', function() { alert('test'); });

First I tried this solution:

jQuery('.autocomplete_brand').live('autocompleteselect', function(event, ui){
      jQuery('#btn').removeClass('inactive').attr('disabled',''); 
});

This enables the button, but then I was reminded that this will not work, because .live only works on click events. So I changed the code to this:

jQuery('.ui-menu-item a').live('click', function() {
  jQuery('#btn').removeClass('inactive').attr('disabled','');
});

This almost works. The disable attribute is blanked out, but the alert will still not trigger when I click the button.

So what am I missing here?

Answer 1

What version of jQuery are you using? The following:

This enables the button, but then I
was reminded that this will not work,
because .live only works on click
events.

Is not true for >= 1.44 (and may be true for versions even before that. Edit: I’m almost positive this will work with >= 1.3, when live was added.).

You can do exactly what you were trying to do with the autocompleteselect event:

jQuery('.autocomplete_brand').live('autocompleteselect', function(event, ui){
      jQuery('#btn').removeClass('inactive').attr('disabled',''); 
});

If you’re using jQuery >= 1.6, however, you’ll want to use prop:

jQuery("#btn").removeClass("inactive").prop("disabled", false);

Here it is working with jQuery 1.6:

http://jsfiddle.net/wGH32/