动态创建的 JQuery Select 元素

Question

我实际上正在开发一个由表格组成的项目。

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

我想要做的是在 TD 上放置一个鼠标悬停事件，这样当我将鼠标放在 TD 上时，我会向它添加一个类，当我鼠标移开时，我会删除该类。

但是由于这是一个动态生成的项目，因此我不能正常执行鼠标悬停事件。

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

添加委托(delegate):

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