CODEWITHSUNDEEP
jqueryhtmlajax
aBhijit
aBhijit

Reputation: 5361

mouseenter function to select the current div(this div)

Following divs are getting generated by 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>

I am using the following jQuery to highlight the div that I am pointing to.

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

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

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

Problem is, it highlights both the divs. I want only the div that I am pointing to be highlighted.

Both these divs are generated inside a parent div having class 'table_body'.

Upvotes: 0

Views: 68

Answers (1)

adeneo
adeneo

Reputation: 318222

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

Upvotes: 4

Related Questions