JQuery选择动态创建的元素

我实际上在做一个由表组成的项目

此表包含一些TR和TD。 这些和是从我的JQuery（更准确地说是Ajax）生成的，因此它们是动态生成的

我想做的是，在TD上放置mouseover事件，所以当我将鼠标放在TD上时，我向它添加一个类，当我mouseout时，我删除该类

但由于这是一个动态生成的项，我不能正常地执行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>");

---

谢谢你的帮助：）

为什么不呢？您可以使用事件委派并传入选择器，如下所示

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

现在，它应该只影响事件发生的特定td中的

图像。
添加委派：

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

或者更好的方法是，在创建propertyDOM元素时添加事件处理程序：

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

var td=$（''，{'class'：'index-table-cell'，
关于：{
mouseenter:function（）{
$（this.find（“.index表映像”）
.addClass（“索引表imageHover”）
.prev（）
.addClass（“索引表名ContainerHover”）；
},
mouseleave:function（）{
$（this.find（'.index table image'）.removeClass（“index table imageHover”）；
$（this.find（'.i ndex table image'）.prev（）.removeClass（“索引表名containerhover”）；
}
}
}),
a=$（''，{'class'：'index-table-nameLink'，href:pathconmpion}），
div=$（“”，{'class'：'index-table-nameContainer'，text:this['name']}），
img=$（'tbody'）.append（td.append（a.append（div，img））；
像个魔术师一样工作，我不知道在这里通过选择器！非常感谢你！
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) ) );