Javascript jQuery Select2在表TR中的append之后不出现

我试图在表的列中附加一个Select2输入框。它在第一行工作正常，因为它在HTML中是静态的。然后，当我单击按钮添加另一行时，select2不会出现

html和js中的代码对于表格部分应该是相同的，但是我不知道可能的原因是什么

这是截图，忽略用户界面的不一致性，我仍然有更多的问题，但那是另一回事

这是小提琴

HTML

添加新所有者
Matrik号。
集成电路编号。
出生地
官能
学习年
电话号码。
电子邮件
年初业务
1.
2.
3.
4.

JS

tab_owner.on（'单击'，'添加所有者'，函数（e）{
e、 预防默认值（）；
var iRow=$（'tbody tr:last'，制表符所有者）；
var show\u studentdata=$（“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
“删除”+
“\n”）；
//将模态数据插入表/表单
$（'tbody'，tab_owner）.append（show_studentdata）；
Metronic.scrollTo（显示学生数据、幻灯片设置）；
});
函数loadStudentDetails（d）{
$（'[name^=ic_'+iRow+']'）.val（d.smIcNo）；
$（'[name^=bp_'+iRow+']'）.val（d.smBirthPlace）；
$（'[name^=fac_'+iRow+']'）.val（d.smFacultyCode）；
$（'[name^=syear_'+iRow+']'）.val（d.studyyear）；
学生电话号码val（d.smHandphoneNo）；
学生_emailadd.val（d.smEmailAddr）；
}
matrik_数
.选择2({
allowClear:是的，
占位符：“键入时进行筛选”，
最小输入长度：3，
阿贾克斯：{
url:'home/umkei/info/student'，
数据类型：“json”，
安静百万：250，
数据：功能（术语，第页）{
返回{q:term}；
},
结果：功能（数据、页面）{
返回{结果：数据}；
},
缓存：真
}
})
.关于（“变更”，职能（e）{
var id=matrik_number.val（）；
如果（id！=''）{
$.ajax({
url:'home/umkei/info/student/'+id，
数据类型：“json”，
beforeSend:function（）{
showmetronic加载（el、msgLoading）；
},
错误：函数（）{
Metronic.Unbui（el）；
showMetronicAlert（'danger'，'warning'，msgInternetError+'。无法加载学生信息。'）；
},
成功：功能（res）{
Metronic.Unbui（el）；
学生资料（res）；
}
});
}
});

小提琴不工作，因为我以前从未使用过它，但我在日志中有一些错误，但我不知道是什么问题，所以我为此道歉

但是你应该了解我的代码是什么样子的。我一直在改变和测试的东西在这里和那里，所以请原谅，如果一些代码看起来不一致，因为我一定是错过了它，而把它放在小提琴

---

谢谢。

在附加新的select2之后，您需要初始化它们

将select2初始化代码包装到函数中，然后使用以

名称开头的函数调用它

tab_owner.on（'单击'，'添加所有者'，函数（e）{
e、 预防默认值（）；
var iRow=$（'tbody tr:last'，制表符所有者）；
var show\u studentdata=$（“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
“\n”+
“
非常感谢，伙计！我以前尝试过创建函数，但我想我不知道如何调用它，所以我删除了它。它非常简单。顺便说一句，我有一个差不多是这样的问题-你能帮我吗？或者我需要创建一个新问题吗？我有一个关于如何创建的想法。”
                                <table class="table table-hover" id="tab_owner">
                                    <thead>
                                        <tr>
                                            <th class="text-center" colspan="4"><a
                                                class="btn green add-owner pull-left"><i
                                                class="fa fa-plus"></i>Add New Owner</a></th>
                                        </tr>
                                        <tr>
                                                <th> Matrik No. </th>
                                                <th> IC No.</th>
                                                <th> Birth Place</th>
                                                <th> Faculty</th>
                                                <th> Study Year</th>
                                                <th> Phone No.</th>
                                                <th> Email</th>
                                                <th> Year Start Business</th>
                                                <th width="3%"></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr id="owner_0">
                                            <td width='15%'><input name="matrik_number" type="text" class="form-control select2"></td>
                                            <td width='10%'><input name="ic_0" type="text" class="form-control" readonly></td>
                                            <td width='8%'><input name="bp_0" type="text" class="form-control" readonly></td>
                                            <td width='5%'><input name="fac_0" type="text" class="form-control" readonly></td>
                                            <td width='5%'><input name="syear_0" type="text" class="form-control" readonly></td>
                                            <td width='8%'><input name="student_phoneno_0" type="text" class="form-control"></td>
                                            <td width='10%'><input name="student_emailadd_0" type="text" class="form-control"></td>
                                            <td width='3%'><select name="business_yearstart_0" class="form-control required">
                                                <option value=""></option>
                                                <option value="1">1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                                <option value="4">4</option>
                                                </select>
                                            </td>

                                            <td width='3%'><!-- placeholder for remove button --></td>   
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

tab_owner.on('click', '.add-owner', function (e){
            e.preventDefault();

            var iRow = $('tbody tr:last',tab_owner).index() + 1;
            var show_studentdata = $("<tr id='owner_"+ iRow +"' >\n" +
                        "<td width='15%'><input name='matrik_number_"+ iRow +"' type='text' class='form-control'></td>\n" +
                        "<td width='10%'><input name='ic_"+ iRow +"' class='form-control' readonly></td>\n" +
                        "<td width='8%'><input name='bp_"+ iRow +"' class='form-control' readonly></td>\n" +
                        "<td width='5%'><input name='fac_"+ iRow +"' class='form-control' readonly></td>\n" +
                        "<td width='5%'><input name='syear_"+ iRow +"' class='form-control' readonly></td>\n" +
                        "<td width='8%'><input name='student_phoneno_"+ iRow +"' class='form-control'></td>\n" +
                        "<td width='10%'><input name='student_emailadd_"+ iRow +"' class='form-control'></td>\n" +
                        "<td width='3%'><select name='business_yearstart_"+ iRow +"'></select></td>\n" +
                        "<td width='3%'><a class='btn btn-outline btn-circle btn-sm red del-owner pull-right'><i class='fa fa-remove'></i>Remove</a></td>" +
                        "</tr>\n");



            //insert modal data to tables/forms
            $('tbody',tab_owner).append(show_studentdata);

            Metronic.scrollTo(show_studentdata, slideOffeset);

        });

        function loadStudentDetails(d){
            $('[name^=ic_'+ iRow +']').val(d.smIcNo);
            $('[name^=bp_'+ iRow +']').val(d.smBirthPlace);
            $('[name^=fac_'+ iRow +']').val(d.smFacultyCode);
            $('[name^=syear_'+ iRow +']').val(d.studyyear);
            student_phoneno.val(d.smHandphoneNo);
            student_emailadd.val(d.smEmailAddr);
            }

        matrik_number
        .select2({
            allowClear: true,
            placeholder: "Filter as you type",
            minimumInputLength: 3,
            ajax: {
                url: 'home/umkei/info/student',
                dataType: 'json',
                quietMillis: 250,
                data: function (term, page) {
                    return { q: term };
                },
                results: function (data, page) {
                    return { results: data };
                },
                cache: true
            }
        })
        .on("change", function(e) {
            var id = matrik_number.val();

            if(id != ''){
                $.ajax({
                    url: 'home/umkei/info/student/'+id,
                    dataType: 'json',
                    beforeSend:function(){
                        showMetronicLoading(el,msgLoading);
                    },
                    error: function(){
                        Metronic.unblockUI(el);


showMetronicAlert('danger','warning',msgInternetError + '. Failed to load Student Info.');
                    },
                    success: function(res){
                        Metronic.unblockUI(el);

                        loadStudentDetails(res);

                    }
                });
            }
        });