点击新增按钮追加表格行时出现重复select picker组件问题求助

问题原因 #

• 你在bootstrap-select初始化完成后才获取首行单元格的HTML内容，此时获取的内容不仅包含原始的<select>标签，还包含bootstrap-select自动生成的下拉UI组件DOM结构，直接插入新行时就已经自带了一套select组件，后续的渲染操作又会把原始<select>再渲染为一套新组件，最终出现重复。
• 新增行后执行的$('.selectpicker').selectpicker('render')是全局匹配所有selectpicker元素，会给已经渲染完成的旧行元素重复执行渲染逻辑，也会引发显示异常。

修复代码 #

替换你的JS逻辑为如下内容即可：

$(document).ready(function() {
    // 优先提取原始的select模板，此时还未执行bootstrap-select初始化
    var originSelectTemplate = $("table td:first-child select.selectpicker")[0].outerHTML;
    var actionsTemplate = $("table td:last-child").html();

    // 初始化页面已有的组件
    $('[data-toggle="tooltip"]').tooltip();
    $('.selectpicker').selectpicker();

    // 新增行逻辑
    $(".add-new").click(function() {
        var $lastRow = $("table tbody tr:last-child");
        // 拼接新行内容，使用原始select模板，避免带入已渲染的组件DOM
        var newRow = `
        <tr>
            <td>
                <div class="row-fluid">${originSelectTemplate}</div>
            </td>
            <td><input type="text" class="form-control" name="debit"></td>
            <td><input type="text" class="form-control" name="credit"></td>
            <td><input type="text" class="form-control" name="description"></td>
            <td>${actionsTemplate}</td>
        </tr>`;
        $("table tbody").append(newRow);
        var $newRow = $lastRow.next();
        $newRow.find(".add, .edit").toggle();
        // 仅初始化新行内的组件，不影响旧行
        $newRow.find('[data-toggle="tooltip"]').tooltip();
        $newRow.find('.selectpicker').selectpicker('render');
        // 恢复新增按钮可用，修复原代码点击一次就禁用无法再次新增的问题
        $(this).removeAttr("disabled");
    });
});

核心修改点 #

1. 提前提取未被bootstrap-select渲染的原始select标签作为模板，避免插入冗余的已渲染DOM
2. 新增行后仅针对当前新行内的元素执行初始化操作，不全局扫描所有元素
3. 修复原代码新增按钮点击一次就永久禁用的问题

内容的提问来源于stack exchange，提问作者Anser Waseem