当我使用模板时，Javascript函数不起作用

Question

I have a html file with in a javascript code.

<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");
        }               
    );
});

Well this works. Now I use a jQuery template system. In the index.html is the script tag included. In a other file that include with a .on("pagebefore") event, I include the three a tag's. The problem is that the .hover function doesn't works. When I paste the .hover code in my console it works.

Here the jsFiddle

Thanks in advice!

Answer 1

It might be because the elements are created dynamically

$(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");
});

You can simplify it to

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");
});

Demo: Fiddle

Answer 2

Way too much code, not sure why it isn't working with your template but try this:

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;");
            });
        }               
    );

HTML:

<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>

Fiddle Demo: http://jsfiddle.net/calder12/uXPt9/3/