I am trying to use some really simple jquery in a rails 3 app. I am trying to get a function to run whenever a rails 3 js callback is fired, the function is to add or remove css classes from link elements. But so far I keep getting errors in the console (chrome) stating that the object defined by my css selectors doesn't have the addClass and removeClass methods.

Here is my code:

2. $(function($) {
3. var resetArtistTabStates = function () {
4. $("#artist-tabs li a".addClass("current"));
5. alert("something is happening");
6. };
7. $("#artist-tabs").bind("ajax:success", resetArtistTabStates);
8. });

The ajax:success event come from rails.js jquery file, which contains the following:

2. callRemote: function () {
3.             var el      = this,
4.                 method  = el.attr('method') || el.attr('data-method') || 'GET',
5.                 url     = el.attr('action') || el.attr('href'),
6.                 dataType  = el.attr('data-type')  || 'script';
7. 
   
8.             if (url === undefined) {
9.               throw "No URL specified for remote call (action or href must be present).";
10.             } else {
11.                 if (el.triggerAndReturn('ajax:before')) {
12.                     var data = el.is('form') ? el.serializeArray() : [];
13.                     $.ajax({
14.                         url: url,
15.                         data: data,
16.                         dataType: dataType,
17.                         type: method.toUpperCase(),
18.                         beforeSend: function (xhr) {
19.                             el.trigger('ajax:loading', xhr);
20.                         },
21.                         success: function (data, status, xhr) {
22.                             el.trigger('ajax:success', [data, status, xhr]);
23.                         },
24.                         complete: function (xhr) {
25.                             el.trigger('ajax:complete', xhr);
26.                         },
27.                         error: function (xhr, status, error) {
28.                             el.trigger('ajax:failure', [xhr, status, error]);
29.                         }
30.                     });
31.                 }
32. 
    
33.                 el.trigger('ajax:after');
34.             }
35.         }

Any ideas why my code is resulting in these errors?

Thanks,

Sean