how to hook a callback to click event of star rating control

Question

I am using jQuery star rating control found at http://www.fyneworks.com/jquery/star-rating/#tab-Overview . I am using 5 stars, each star having a particular value from 1 to 5. The control is getting displayed and behaving properly. However, I have a requirement of getting the value of the star clicked, immediately after a star is clicked. I do not know how to do it.

I appreciate your help.

Answer 1

The stars are basically using the radio buttons behind the scenes and have the class star, Try this:

$(function(){
  $('.star').live('click', function(){
     alert($(this).val());
  });
});

Answer 2

After analyzing the structure of the markup generated by the rating control, I added the following code in the document ready function.

    $('div.star').live('click', function() {
        var value = $('a', this).html().trim();


        var ratingName = $(this).parent().next('input[type="radio"]').attr('name');

        alert('rating for ' + ratingName ' is ' + value);
    });

This is working fine, but is very indirect. I don't know more direct solution.

Answer 3

In a project we were using that same plugin and had to move out from it because it was really slow when having a lot of star ratings in the same page (it generates a lot of dom elements for each input element). We ended up implementing the css only tecnique seen here, it's way faster (but It obviously loose some options like the "partial star" rating)