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

下面的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>

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

这两个div都是在类为“table_body”的父div中生成的。

将行作为目标，然后：

$(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');
});

然后以行为目标：

$(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');
});

---

谢谢。伟大的优化。非常感谢adeneo和@Barmar。非常感谢。伟大的优化。非常感谢adeneo和@Barmar。