jquery - 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

Target the row then:

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

Sidenote: could be shortened to:

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