Javascript函数dosn'；当我使用模板时，它不起作用

我有一个包含javascript代码的html文件

<div id="star_rating">
    <a id="one">&#9734;</a><a id="two">&#9734;</a><a id="three">&#9734;</a>
</div>
<script type="text/javascript">
$(document).on("ready", function() {
    $("#one").hover(
        function () {
            markHover("true", "false", "false", "false", "false");
        },function () {
            markHover("false", "false", "false", "false", "false");
        }               
    );
    $("#two").hover(
        function () {
            markHover("true", "false", "false", "false", "false");
        },function () {
            markHover("false", "false", "false", "false", "false");
        }               
    );
});

谢谢你的建议
 这可能是因为元素是动态创建的

$(document).on('mouseenter','#one',function () {
    markHover("true", "false", "false", "false", "false");
}).on('mouseleave', '#one', function () {
    markHover("false", "false", "false", "false", "false");
});
$(document).on('mouseenter','#two',function () {
    markHover("true", "true", "false", "false", "false");
}).on('mouseleave', '#two', function () {
    markHover("false", "false", "false", "false", "false");
});

你可以把它简化为

var params = {
    'one': ["true", "false", "false", "false", "false"],
    'two': ["true", "true", "false", "false", "false"],
    'three': ["true", "true", "true", "false", "false"],
    'four': ["true", "true", "true", "true", "false"],
    'five': ["true", "true", "true", "true", "true"],
}

$(document).on('mouseenter','#one, #two, #three, #four, #five',function () {
    markHover.apply(window, params[this.id]);
}).on('mouseleave', '#one, #two, #three, #four, #five', function () {
    markHover("false", "false", "false", "false", "false");
});

演示：
太多的代码，不确定为什么不能与模板一起使用，但请尝试以下方法：

jQuery：

   $(".rate").hover(
        function () {
            var thisone = parseInt($(this).data('star'));
            $(".rate").each(function(){ 
                if(parseInt($(this).data('star')) <= thisone)
                {
                    $(this).html("&#9733;");
                }
            });
        },
        function () {
            $(".rate").each(function(){
                $(this).html("&#9734;");
            });
        }               
    );

$（“.rate”）。悬停(
函数（）{
var thisone=parseInt（$（this）.data（'star'）；
$（“.rate”）.each（函数（）{
if（parseInt（$（this）.data（'star'））恐怕我不明白什么不起作用。星星按预期出现。你还期望发生什么？@ClaudioRedi在其他文件中拆分js和html时它不起作用。我猜你是在DOM中存在元素之前绑定事件。尝试使用事件委派。这是一个著名的答案：）谢谢你，伙计，我已经做了三个小时了。但是现在我真的很感谢你：哈，生活就是这样，很高兴你把它整理好了！
<div>
    <a class="rate" id="one" data-star="1">&#9734;</a>
    <a class="rate" id="two" data-star="2">&#9734;</a>
    <a class="rate" id="three" data-star="3">&#9734;</a>
    <a class="rate" id="four" data-star="4">&#9734;</a>
    <a class="rate" id="five" data-star="5">&#9734;</a>
</div>