3

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

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

我想要做的是在 TD 上放置一个 mouseover 事件，所以当我将鼠标放在 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")
    }
});

感谢您的帮助:)！！！

4

2 回答 2

3

添加委托：

$("#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) ) );
于 2013-07-31T21:29:47.070 回答
1

为什么不可以使用事件委托并像下面一样传入选择器。

$("#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事件发生的特定 td 中的 。

于 2013-07-31T21:29:39.813 回答