Choices JS动态新增表格行后重新初始化不生效如何解决

故障原因 #

• 克隆表格行时同步复制了原有行中Choices插件生成的自定义DOM结构，新增行内的对应元素已不是原生<select>标签，无法直接被插件初始化
• 重复调用new Choices('.pdt-name')会选中所有带该类名的元素，包含已初始化过的选择框，会触发插件冲突，导致新增、原有选择框都无法正常工作
• 克隆节点携带的原有Choices生成的唯一ID、绑定事件等属性，也会导致插件识别异常

修复步骤 #

1. 调整初始化逻辑 #

首次初始化时遍历每个选择框单独实例化，避免批量初始化的隐性冲突：

// document ready 阶段初始化
$(document).ready(function() {
    $('.pdt-name').each(function() {
        new Choices(this);
        // 有自定义配置可统一传入：new Choices(this, {你的配置项})
    });
});

2. 修改新增行逻辑 #

克隆行后先清理原有Choices生成的冗余结构，再仅对当前新增行的选择框做初始化：

function addRow(table) {
    var x = document.getElementById(table);
    var new_row = x.rows[1].cloneNode(true);

    // 清理新增行中旧的Choices结构，恢复为原生select
    var $selectWrap = $(new_row).find('.choices');
    var $originSelect = $selectWrap.find('.pdt-name');
    // 可按需重置select状态，比如清空选中值
    $originSelect.val('');
    // 替换掉Choices生成的容器，恢复原生结构
    $selectWrap.replaceWith($originSelect.prop('outerHTML'));

    // 追加行到表格
    $('#TableName tbody:last-child').append(new_row);

    // 仅为当前新增行的select初始化Choices
    new Choices($(new_row).find('.pdt-name')[0]);
}

可选优化 #

如果可以提前准备隐藏的模板行（仅包含原生<select class="pdt-name">，未初始化过Choices），直接克隆模板行即可省去清理旧结构的步骤，运行效率更高。

内容的提问来源于stack exchange，提问作者Rifat Tanjir