Link calling a jQuery function doesn't seem to be working

Question

I am a jQuery newb so this is probably rudimentary.

I have a test page here: http://www.problemio.com where I am trying to make links to vote up or down.

Here is how the links look like:

<a class="link_button" id="vote_up">Vote Up</a> 
<a class="link_button" id="vote_down">Vote Down</a>

I use the class attribute for styling all over the site with that link_button so I decided to use the id attribute to distinguish the link for the jQuery call.

Here is how my jQuery function looks like:

$('a.vote_up').click(function() 
{
alert("up");
});

Right now I just want to make sure it is getting called properly. But the alert isn't getting called which is making me think this is broken somewhere. Any idea how I can get this working?

Thanks!

Answer 1

You're using the class selector . instead of the id selector # . Hence do either

$('#vote_up').click(function(){
     alert("up");
});

or

$('.link_button').click(function(){ 
    if( this.id === 'vote_up' )
        alert('vote up'); 
    else if ( this.id === 'vote_down' )
        alert('vote down'); 
 } 

EDIT: also make sure everything is in a $(document).ready... ie

$(function(){ 
    $('#vote_up').click(function(){
         alert("up");
    });
}); 

Answer 2

Your current selector is incorrect, it is looking for an a tag with a class of vote_up not it's id...

use this instead...

$(function() {
    $('#vote_up')...
});

Answer 3

Have you tried the id selector?

$('#vote_up').click(function() {
    alert('up');
});

Answer 4

a.vote_up looks for an <a> tag with the class vote_up . In your HTML vote_up is an ID, so you want this:

$('#vote_up').click(function()