如何mouseenter与活元素？

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（如果有的话，您可能需要照顾子孙的事件）。