How to mouseenter with live elements?
<p>I'm having trouble with mouseenter with live element. The functions is not triggered when I hover over a selected element added with javacript.</p>

<p>I add the elements with this:</p>

<pre><code>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 &lt;= $maxGrade; ++$i) {
            $('&lt;span /&gt;', {
                "class" : "grader",
                "z-index" : $i,
                "width" : ($gradeLength*$i)+'px'
            }).attr('grade', $i).appendTo($self);
        }
    });
}
</code></pre>

<p>And i try to <code>mouseenter</code> with this:</p>

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

<p>My output looks like this:</p>

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

<p>Problem is that the <code>mouseenter</code> never runs. Why is this? It works if I attach <code>mouseenter</code> to <code>.iconstarsdynamic.isgradeable</code>, but that's not what I want. I want it attached to <code>.iconstarsdynamic.isgradeable .grader</code>.</p>
