$(this).append() 异常追加至父元素：嵌套表格hover展开故障排查

你的问题核心在于事件绑定方式错误以及全局选择器导致的范围偏差，具体原因和修复方案如下：

为什么会出现这个问题？ #

1. 静态事件绑定的局限性：
   你最初用$('td.standard').mouseenter()绑定事件，这种方式只会给页面加载时已存在的td.standard元素绑定事件。后续动态生成的新单元格（同样带有standard类）并没有被绑定该事件。

2. 事件冒泡引发的错误触发：
   当你悬停新生成的子单元格时，事件会向上冒泡到它的父元素——也就是最初的那个单元格（虽然你移除了它的standard类，但事件是绑定在元素本身上的，不会随类的移除而消失）。此时触发的是最初单元格的mouseenter事件，$(this)自然指向最初的父单元格，导致新表格被追加到错误位置。

3. 全局选择器的范围问题：
   你用$('.new')选择新单元格，这会选中页面上所有带有new类的元素，在嵌套结构中极易影响其他层级的单元格。

修复后的代码 #

$(document).ready(function () {
    // 使用事件委托，绑定到静态父元素（这里用body，也可绑定到最外层table以提升效率）
    $('body').on('mouseenter', 'td.standard', function () {
        const $currentCell = $(this);
        // 移除当前单元格的standard类，避免重复触发事件
        $currentCell.removeClass('standard');
        
        const dimension = $currentCell.width();
        // 向当前单元格追加子表格
        $currentCell.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>`);
        
        // 仅选择当前单元格内的新单元格，调整尺寸并移除标记
        $currentCell.find('.new')
            .css({ 'width': dimension / 2, 'height': dimension / 2 })
            .removeClass('new');
    });
});

关键修改点说明 #

• 事件委托：用$('body').on('mouseenter', 'td.standard', ...)代替直接绑定，这样不管是初始还是动态生成的td.standard，触发mouseenter时都会被正确处理——事件通过冒泡传递到静态父元素（body），再由父元素判断目标元素是否匹配选择器，从而执行回调。
• 限定选择范围：用$currentCell.find('.new')代替全局的$('.new')，确保只处理当前悬停单元格内的新生成单元格，避免干扰其他层级元素。
• 缓存jQuery对象：把$(this)存为$currentCell，减少重复DOM查询，提升代码效率和可读性。

这样修改后，不管嵌套多少层，鼠标悬停任意可见的td.standard单元格时，都会在当前单元格内生成子表格，完全符合你想要的效果。

内容的提问来源于stack exchange，提问作者J. Shymko