jQuery Star Rating Form Element – Integration with wordpress & Types/Views

I am using OnTheGoSystem’s Types and Views to build a review site.

I have integrated this jQuery plugin to their parametric search form:
http://www.giveupalready.com/content.php?219-jQuery-Star-rating-form-element

It is sort of working here:
http://jeffcleverley.com/home/reviews/

It is functioning, in that I can select different ratings and search by them, but as the stars are not changing when you click on them, you don’t know what you have selected. The stars only change when the search has been completed.

In their demo the stars immediately upon clicking on them, as they do when I am just using it on a standard HTML page.

If I change my settings to ‘Ajax results update when a filter value changes’ this automates the submit and the stars change once the value changes are submitted, but it’s still the same problem and too slow to be usable.

Views utilises shortcodes, my loop filter is:

<div class="stars">[wpv-control field="rating" url_param="rating" type="radios" values="1,2,3,4,5" display_values="1,2,3,4,5"]</div>

Which should output something like this:

<input type="radio" id="form" name="rating" value="1" class="js-wpv-filter-trigger wpcf-form-radio form-radio radio style><label class="wpcf-form-label wpcf-form-radio-label" for="form" style>1</label>
<input type="radio" id="form" name="rating" value="2" class="js-wpv-filter-trigger wpcf-form-radio form-radio radio style><label class="wpcf-form-label wpcf-form-radio-label" for="form" style>2</label>
<input type="radio" id="form" name="rating" value="3" class="js-wpv-filter-trigger wpcf-form-radio form-radio radio style><label class="wpcf-form-label wpcf-form-radio-label" for="form" style>3</label>
<input type="radio" id="form" name="rating" value="4" class="js-wpv-filter-trigger wpcf-form-radio form-radio radio style><label class="wpcf-form-label wpcf-form-radio-label" for="form" style>4</label>
<input type="radio" id="form" name="rating" value="5" class="js-wpv-filter-trigger wpcf-form-radio form-radio radio style><label class="wpcf-form-label wpcf-form-radio-label" for="form" style>5</label>

The css is:

.stars br,
.stars input {
    display: none;
}

.stars label {
display:inline-block;
width:20px;
height:20px;
text-indent:100%;
overflow:hidden;
background:url(http://jeffcleverley.com/wp-content/themes/genesis-sample/images/staroff.png) no-repeat;} 

.stars label.on {
background-image: url(http://jeffcleverley.com/wp-content/themes/genesis-sample/images/staron.png);}

and the jquery is:

(function($) {
$.fn.starRating = function(options) {

    // Defaults and options
    var defaults = {
                        onimage: 'staron.png',
                        offimage: 'staroff.png'
    };
    var opts = $.extend({}, defaults, options);
    this.each(function() {
        $('input[type=radio]',this).hide(); //hide the radio buttons themselves
        $('label span',this).hide(); //hide the regular text labels
        $('label',this).append('<img src="'+opts.offimage+'">'); //create image elements 

        var changeHandler = function()
        {
            stars = parseInt($(this).val());
            elementName = $(this).attr('name');
            $('input[name='+elementName+']').each(function(){
                if(parseInt($(this).val()) <= stars)
                {

$('img',$(this).parent()).attr('src',opts.onimage);
                }
                else
                {
                    $('img',$(this).parent()).attr('src',opts.offimage);

    }
            });
        }
        $('input[type=radio]',this).bind('change',changeHandler);
        $('input[type=radio]:checked',this).trigger('change');
    })}})(jQuery);

Can anyone see why the stars don’t change on a mouse click but only on the form submit?