使用 JQuery 评级星级并将数据提交给分析

Question

我在实现 JQuery 星级评分插件时遇到一些问题。有问题的插件可以在 http://orkans-tmp.22web.net/star_ rating/

我遇到的麻烦是将分数传递给谷歌分析。我已设法实现该插件，但由于某种原因，代码不会触发分析自定义事件。单击星星时会提醒正确的当前值，这是我要传递给 Google Analytics 事件跟踪的值。

任何帮助将不胜感激，我的代码如下：

<link rel="stylesheet" type="text/css" media="screen" href="css/styles.css"/>   
<script type="text/javascript" src="js/jquery.min.js></script>
<script type="text/javascript" src="js/jquery-ui.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.stars.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.ui.stars.css"/>


<script type="text/javascript">
    var url = location.href;

    $(function ratingStars(){
        $("#ratings").stars({
            captionEl: $("#stars-cap"),
            oneVoteOnly: false,
        });
    });

    $(document).ready(function(){
        $('.ui-stars-star').click(function() {
            // Retrieve instance
            var ui = $("#ratings").data("stars");
            var currValue = ui.options.value;
            //alert the currValue to make sure it is in place.
            alert(currValue);
           //send data to track
          _gaq.push(['_trackEvent', 'UATRatingTest', 'UATRatingTest2', url, currValue]);
        });
    });
</script>

<div class="RatingStars">
    <form id="ratings">
        <input type="radio"  name="rate" value="1" title="Poor" id="rate1" />
        <input type="radio"  name="rate" value="2" title="Fair" id="rate2" /> 
        <input type="radio"  name="rate" value="3" title="Average" id="rate3" /> 
        <input type="radio"  name="rate" value="4" title="Good" id="rate4" /> 
        <input type="radio"  name="rate" value="5" title="Excellent" id="rate5" />
    </form>
<span style="margin-right:5px; margin-left:10px;"> Rating: </span> <span id="stars-cap"></span> <br/>

该插件为每个星星创建一个星

<div class="ui-stars-star"> 

号，这就是为什么我在它上面添加了一个点击功能，以尝试提交给定的分数。

如果有人以前有过使用该插件的经验，那就太好了。

谢谢，

西蒙

Answer 1

我找到了问题的答案。看来 currValue 被解析为字符串，而不是分析触发脚本所需的整数。我通过使用以下代码将值转换为整数来解决这个问题：

var myString = currValue;
var myConvertedInteger;
myConvertedInteger = parseInt(myString);
//Check string has been converted 
alert(myConvertedInteger);
_gaq.push(['_trackEvent', 'UATRatingTest', 'UATRatingTest2', url, myConvertedInteger]);

感谢您的输入 Rory。

Answer 2

如果带有 .ui-stars-star 类的元素是动态创建的，请尝试使用 live() 方法来连接它们的事件：

$('.ui-stars-star').live("click", function() { ...

或者，如果您使用的是 jQuery 1.7、可以使用on()

$('.ui-stars-star').on("click", function() { ...