Javascript $（this）.append（）附加到父级

我正在尝试创建一个2x2表格，当鼠标悬停时，每个单元格都会变成另一个2x2表格，类似于koalastothemax.com。这是由

使悬浮的单元格不可见

将2x2表格附加到其中，将新单元格标记为“新”

调整标记为“新建”的单元格的大小

取消标记新单元格

第一次悬停效果很好，单元格变成了一个较小的2x2表格。但是，当鼠标悬停在新附加表的较新单元格部分上时，尽管有$（this）.append，它还是会将表附加到父元素（最初悬停在上面的单元格）上

以下是JSFIDLE链接：

非常感谢您的帮助。谢谢大家!

$(document).ready(function () {
    //Cursor enters a visible cell
    $('td.standard').mouseenter(function () {

        //Make the cell invisible
        $(this).removeClass('standard');

        //Find the dimensions of the cell
        var dimension = $(this).width();

        //Insert 2x2 table into cell
        $(this).append("<table><tr><td class='standard new'></td><td class='standard new'></td></tr><tr><td class='standard new'></td><td class='standard new'></td></tr></table>");

        //Resize the new cells and remove the 'new cell' marker
        $('.new')
            .css({
                'width': dimension / 2,
                'height': dimension / 2
            })
            .removeClass('new');
    });
});

$（文档）.ready（函数（）{
//光标进入可见单元格
$（'td.standard'）.mouseenter（函数（）{
//使细胞隐形
$（this.removeClass（'standard'）；
//查找单元格的尺寸
变量维度=$（this）.width（）；
//将2x2表格插入单元格
$（此）。追加（“”）；
//调整新单元格的大小并删除“新单元格”标记
$（“.new”）
.css({
“宽度”：维度/2，
“高度”：尺寸/2
})
.removeClass（“新”）；
});
});

您的mouseenter事件仅设置为第一组表格单元格。改为尝试以这种方式附加事件，以便事件处理程序是“活动的”，并且对于新元素也是有效的

$(document).on("mouseenter", 'td.standard', function(event) {

  //Make the cell invisible
  $(this).removeClass('standard');

  //Find the dimensions of the cell
  var dimension = $(this).width();
...

---

您可能希望使用事件委派。在这里查看我更新的小提琴：在这里查看关于授权的文档：