JQuery Multiple selector problem

Question

<script>
    $(function(){
            $("a.a, a.b, a.c, a.d").click(function () {
             alert('Hi');
            });
    });
</script>

<a href="#" class="a button">Hi</a>

The above JQuery unfortunately doesn't work. Probably an easy fix, any ideas? I need it to be a multi-selector, but with a's that have multiple classes unfortunately don't work.

Answer 1

You can also get there by registering it as a 'live' event that will match all future elements that fit the selector. Something like this:

<script type="text/javascript" language=javascript>
  $('a.a, a.b, a.c, a.d').live('click', function() {
    alert('Hi');
  });
</script>

That'll cover you for any future elements created that also match your requirements.

Answer 2

My assumptions are that those pieces are located properly within a valid HTML document, that your link to a current version of the jQuery library is functional, that you're using a modern browser, and that you're using a tool like Firebug to watch for errors during the initial page load and during the click. With your exact code set up with these assumptions, it works fine for me.