ライブ要素でマウスを移動するにはどうすればよいですか？

Question

ライブ要素でマウスセンターに問題があります。 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を使用する必要があります（もしあれば、子孫のイベントを処理する必要があるかもしれません）。