JQuery Элемент выбора динамически создается

Question

Я фактически работаю над проектом, который состоит из таблицы.

В этой таблице содержатся некоторые TR и TD. Те и генерируются из моего JQuery, точнее, Ajax, поэтому они динамически генерируются.

Что я хочу сделать, помещает событие курсора мыши на TD, поэтому, когда я накладываю мышь на TD, я добавляю к нему класс, а когда я нажимаю, я удаляю класс.

Но так как это динамически созданный элемент, я не могу просто делать событие mouseover нормально.

TD имеют все одинаковый класс.

Вот строка, которая создает мой 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>"); 

У меня есть простой код, который работает на 50% от того, что я хочу сделать. Мой класс добавляет TD, но проблема в том, что он добавляет его ко всем TD, и я хочу, чтобы новый класс находился на наведенном 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") 
    } 
}); 

Спасибо за помощь:) !!!

Answer 1

Добавить делегации:

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

Или еще лучше, добавить обработчик событий при создании соответствующих элементов DOM:

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

Почему вы не можете использовать Событие Делегация и перейдите в селектор, как показано ниже.

$("#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 

Теперь это должно влиять только на image в частности, тд, в котором происходит событие.