mouseenter函数选择当前div（此div）

Question

以下div是由ajax生成的。

<div id="row1" class="table_row">
<span class="th1">1</span>
<span class="th2">Crocin</span>
<span class="th3">0</span>
</div>

<div id="row2" class="table_row alternate">
<span class="th1">2</span>
<span class="th2">Anacin</span>
<span class="th3">0</span>
</div>

我正在使用以下jQuery来突出显示我指向的div。

$(document).on({
                mouseenter : function () {

                    $(this).find('.table_row').addClass('highlight');
                },

                mouseleave : function () {
                    $(this).find('.table_row').removeClass('highlight');
                }
            }, ".table_body");   

问题是，它突出了两个div。我只希望突出显示我指向的div。

这两个div都是在具有类'table_body'的父div中生成的。

Answer 1

然后定位该行：

$(document).on({
    mouseenter: function () {
        $(this).addClass('highlight');
    },
    mouseleave: function () {
        $(this).removeClass('highlight');
    }
}, ".table_body .table_row");   

旁注：可缩短为：

$(document).on('mouseenter mouseleave', '.table_body .table_row', function(e) {
     $(this).toggleClass('highlight', e.type==='mouseenter');
});