jquery - 現在のdiv（このdiv）を選択するmouseenter関数

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