动态新增表格行后jQuery Select2下拉框不生效问题咨询

问题根源 #

• 页面加载完成后仅对首行固定ID的下拉框执行了select2初始化，后续动态新增的行没有触发初始化逻辑
• 克隆行时直接复制了已经被select2渲染过的原行DOM，会连带复制select2生成的冗余结构，导致新行的下拉框结构混乱无法正常工作

调整方案 #

你需要修改新增行的逻辑，克隆前先销毁原行的select2实例，克隆完成后分别对原行和新行的下拉框做初始化，修改后的完整JS代码如下：

$(function() {
    // 首行select2初始化
    $('#idone, #idtwo').select2();

    $(".add_row").click(function(){
        // 克隆前先销毁原行的select2实例，避免克隆到冗余结构
        $('#idone, #idtwo').select2('destroy');
        var main_tr = $('#main_tr').clone();
        var ml = $(".main_tr").length;
        main_tr.find("label").remove();
        main_tr.find("input").val("");
        main_tr.find("select").val("");
        main_tr.find("#idone").attr("id","idone"+ml );
        main_tr.find("#idtwo").attr("id","idtwo"+ml );
        main_tr.find("#details").attr("id","details"+ml );
        // 原代码中不存在id为date的元素，此行可删除
        // main_tr.find("#date").attr("id","date"+ml );
        $(main_tr).insertAfter('.main_tr:last');

        // 重新初始化原行的select2
        $('#idone, #idtwo').select2();
        // 初始化新增行的select2
        main_tr.find('.onesub, .twosub').select2();
    });

    $(".delete_row").click(function(){
        $(".deleterow:checked").each(function () {
            $(this).parents('.main_tr').remove();
        });
    });

    // 如果你要使用datepicker，建议给日期输入框加统一class，比如.datepicker，再初始化
    // $( ".datepicker" ).datepicker({
    //   changeMonth: true,
    //   changeYear: true,
    // });
});

$(document).ready(function()
{
  $("body").on("change",".onesub",function(){
  var headid=$(this).val();
  var that = $(this);
  var post_id = 'headid='+ headid;
  $.ajax
  ({
      type: "POST",
      url: "ajaxpostone.php",
      data: post_id,
      cache: false,
      success: function(suboneid)
      {
        $(that).parents("tr").find(".suboneid").html(suboneid);
      } 
  });

  });  
});

补充说明 #

• 如果需要使用datepicker组件，给日期输入框新增class="datepicker"，再打开上面注释的datepicker初始化代码即可
• 不要用固定ID选择器做批量初始化，优先用class选择器匹配所有同类型元素

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