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

添加授权：

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

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

JQuery Select元素动态创建

2 个答案: