外部mtree脚本在jQuery动态添加元素时无法正常工作

我帮你分析下这个问题：mtree这类树形组件通常是在页面初始化阶段，对已经存在于DOM中的元素完成绑定和渲染的。而你通过jQuery动态添加的新行，里面的mtree容器是在页面初始化之后才生成的，组件并没有自动识别到这些新元素，自然就不会渲染数据啦。

下面给你一套可行的解决步骤，结合你的代码来调整：

1. 封装mtree初始化函数 #

把原本初始化mtree的逻辑抽成一个可复用的函数，这样不管是初始行还是动态新增的行，都能调用它来完成渲染：

// 封装mtree初始化函数，targetElement是要初始化的mtree容器，treeData是对应的数据
function initMtree(targetElement, treeData) {
    // 替换成你实际使用的mtree初始化代码，这里是示例配置
    $(targetElement).mtree({
        data: treeData, // 传入对应的数据
        // 其他你的mtree配置项，比如展开方式、样式等
        expandAll: false,
        // ...更多配置
    });
}

2. 页面加载时初始化已有mtree #

在$(document).ready里，先对页面上已存在的所有mtree容器执行初始化：

$(document).ready(function() {
    var ite = <?php echo $projectCount; ?>;
    
    // 初始化页面加载时就存在的mtree
    $('.mtree-container').each(function() {
        // 这里假设初始行的mtree数据已经提前准备好，比如存在某个data属性里
        var initialData = $(this).data('tree-data');
        initMtree(this, initialData);
    });

    $('.btn-row-add').click(function() {
        var leaveDays = checkLeaveDays();
        console.log(leaveDays);
        
        // --- 你的新增行代码 ---
        // 这里替换成你实际生成新行的逻辑，注意要包含mtree容器
        var newRowHtml = `
            <tr>
                <td>
                    <!-- 新增的mtree容器，可以通过data属性传递对应的数据 -->
                    <div class="mtree-container" data-tree-data='${JSON.stringify(yourNewTreeData)}'></div>
                </td>
                <!-- 其他列内容 -->
            </tr>
        `;
        $('#your-table-id').append(newRowHtml);
        
        // --- 关键：初始化新行里的mtree ---
        // 找到刚添加的mtree容器
        var newMtreeContainer = $('#your-table-id').find('.mtree-container').last();
        // 获取对应的数据（如果是动态生成的数据，也可以直接传入变量）
        var newTreeData = newMtreeContainer.data('tree-data');
        // 调用初始化函数
        initMtree(newMtreeContainer, newTreeData);
    });
});

3. 注意事项 #

• 确保动态生成的新行里，mtree容器的类名（比如.mtree-container）和初始行完全一致，这样选择器能正确定位到它。
• 如果你的mtree数据是动态获取的（比如从接口拉取），要确保在数据返回后再调用initMtree，避免数据未就绪导致渲染失败。
• 检查初始化函数里的配置项，要和页面初始加载时的mtree配置保持一致，避免出现样式或功能不一致的问题。

内容的提问来源于stack exchange，提问作者ihcc common