JQuery Select element dynamically created

Question

I am actually working on a project that is composed by a table.

This table contains some TR and TD. Those and are generated from my JQuery, more precisely, Ajax, so they are dynamically generated.

What I want to do, is put a mouseover event on the TD so when I put my mouse over a TD, I add a class to it, and when I mouseout, I remove the class.

But since this is a dynamically generated item, I can't just do the mouseover event normally.

The TD have all the same class.

Here is the line that creates my TD

$('#index-table > tbody').append("<td class='index-table-cell'><a href='"+ PathChampion + "' class='index-table-nameLink'><div class='index-table-nameContainer'>" + this['name'] + "</div><img src='" + PathImage + "' alt='" + this['pkChampion'] + "' class='index-table-image'></a></td>");

I have a simple code that work for 50% of what I want to do. My class is adding to the TD, but the probleme is that it adds it to all the TD, and I only want the new class to be on the mouseovered TD.

$("#index-table").on({
    mouseenter: function () {
        $(this).find('.index-table-image').addClass("index-table-imageHover");
        $(this).find('.index-table-image').prev().addClass("index-table-nameContainerHover")
        console.log($(this));
    },
    mouseleave: function () {
        $(this).find('.index-table-image').removeClass("index-table-imageHover");
        $(this).find('.i ndex-table-image').prev().removeClass("index-table-nameContainerHover")
    }
});

Thanks for any helps :)!!!

Answer 1

Add delegation:

$("#index-table").on({
    mouseenter: function () {
        $(this).find('.index-table-image')
               .addClass("index-table-imageHover")
               .prev()
               .addClass("index-table-nameContainerHover")
    },
    mouseleave: function () {
        $(this).find('.index-table-image').removeClass("index-table-imageHover");
        $(this).find('.i ndex-table-image').prev().removeClass("index-table-nameContainerHover")
    }
}, 'td.index-table-cell');

Or even better, add the event handler when you create proper DOM elements:

var td  = $('<td />', {'class':'index-table-cell', 
                       on: {
                           mouseenter: function() {
                               $(this).find('.index-table-image')
                                   .addClass("index-table-imageHover")
                                   .prev()
                                   .addClass("index-table-nameContainerHover");
                           },
                           mouseleave: function() {
                               $(this).find('.index-table-image').removeClass("index-table-imageHover");
                               $(this).find('.i ndex-table-image').prev().removeClass("index-table-nameContainerHover");
                           }
                       }
                      }),
    a   = $('<a />',  {'class':'index-table-nameLink',  href: PathChampion}),
    div = $('<div />', {'class':'index-table-nameContainer', text: this['name']}),
    img = $('<img />', {'class':'index-table-image', src:PathImage, alt:this['pkChampion']});

$('#index-table > tbody').append( td.append( a.append(div, img) ) );

Answer 2

Why not you can use Event Delegation and pass in the selector like below.

$("#index-table").on({
    mouseenter: function () {
        $(this).find('.index-table-image').addClass("index-table-imageHover");
        $(this).find('.index-table-image').prev().addClass("index-table-nameContainerHover")
        console.log($(this));
    },
    mouseleave: function () {
        $(this).find('.index-table-image').removeClass("index-table-imageHover");
        $(this).find('.i ndex-table-image').prev().removeClass("index-table-nameContainerHover")
    }
}, ".index-table-cell");
         ^----------------- Pass the selector here

Now it should only affect the image in the particular td in which the event takes place.