Question

我遇到了带有live元素的mouseenter问题。当我将鼠标悬停在添加了javacript的选定元素上时，不会触发这些功能。

我用这个添加元素：

this.fixElements = function () {
    $('.iconstarsdynamic.isgradeable:not(.touched)').each(function(){
        var $self = $(this),
                $gradeLength = Math.round(parseInt($self.width())/$maxGrade*100)/100;

        $self.addClass('touched');

        for ($i = 1; $i <= $maxGrade; ++$i) {
            $('<span />', {
                "class" : "grader",
                "z-index" : $i,
                "width" : ($gradeLength*$i)+'px'
            }).attr('grade', $i).appendTo($self);
        }
    });
}

我试着mouseenter：

this.hover = function() {
    $('.iconstarsdynamic.isgradeable')
        .on('mouseenter', '.grader', function(){
            $(this).css('visibility', 'visible');
            console.log('over');
        })
        .on('mouseleave', '.grader', function(){
            $(this).css('visibility', 'hidden');
        });
}

我的输出如下：

<span class="iconstarsdynamic isgradeable touched" title="Rated 0 out of 4">
    <span class="stars" style="width:0%;"></span>
    <span class="grader" z-index="1" style="width: 9.25px; " grade="1"></span>
    <span class="grader" z-index="2" style="width: 18.5px; " grade="2"></span>
    <span class="grader" z-index="3" style="width: 27.75px; " grade="3"></span>
    <span class="grader" z-index="4" style="width: 37px; " grade="4"></span>
</span>

问题是mouseenter永远不会运行。为什么是这样？如果我将mouseenter附加到.iconstarsdynamic.isgradeable，它就有效，但这不是我想要的。我希望它附加到.iconstarsdynamic.isgradeable .grader。

Answer 1

mouseenter和mouseleave事件不会冒泡，因此无法使用您使用的事件委派方法。您应该使用mouseover和mouseout代替（您可能必须处理后代事件，如果有的话）。

如何使用live元素进行mouseenter？

1 个答案: