I have a simple page with a list if "items". I am allowing users to vote on these items, but I only want to allow the user to vote one per. item. Therefore i have made a jQuery script that adds a class to the items the user has voted on:

if(! $(this).find(".item span").hasClass("voted")) {
$(".item").hover(function() {
$(this).find(".ratingbar").hide();
$(this).find(".votebar").show();
}, 
function() {
$(this).find(".votebar").hide();
$(this).find(".ratingbar").show();
});
};

This is the script that prevents the user from voting again on the same item.

$(".votebutton").click(function() {

$("div#"+offerid).find(".item").addClass("voted");

}

My problem is that this doesn´t work. When hovering an item, the hover function still runs even though the second script successfully added the class "voted" to the html.

Why can this be?