使用Glyphicon和Bootstrap“数据实时搜索”克隆表格行（下拉列表）

Question

单击字形图标（+）时成功创建的行，但是引导下拉列表（实时数据搜索）在第二行和其他行（克隆后）中不起作用。

这是附带的可运行代码。 请让我知道解决方案。

 $(function() { $(".glyphicon-plus").click(function() { $(this).closest("tr").clone(true).appendTo("#ruleTable"); }); $(".glyphicon-remove").click(function() { if ($('#ruleTable tr').length > 2) { $(this).closest("tr").remove(); } }); }); $(document).ready(function() { $('.selectpicker').selectpicker({ liveSearch: true, showSubtext: true }); }); 

 .bootstrap-select .dropdown-menu>li>a small.muted { display: none; } .bootstrap-select .dropdown-toggle .filter-option { position: relative; padding-left: 38px; } .bootstrap-select .dropdown-toggle .filter-option:before { font-size: 14px; font-weight: 700; position: absolute; left: 0; top: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/select-picker@0.3.1/js/picker.min.js"></script> <table class="table table-bordered table-hover" id="ruleTable"> <thead> <tr> <th class="text-center"> </th> <th class="text-center"> Name </th> </tr> </thead> <tbody> <tr> <td> <span class="glyphicon glyphicon-plus" style="color:lawngreen"></span> <span class="glyphicon glyphicon-remove" style="color:red"></span> </td> <td> <select class="selectpicker" data-live-search="true"> <option>--Select--</option> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> </td> </tbody> 

Answer 1

您遇到的第一个问题是您当时绑定到现有的.glyphicon-plus和.glyphicon-remove按钮。 您需要将事件绑定更改为：

$("#ruleTable").on('click', '.glyphicon-plus', function() {  });

另一个问题是，您克隆了包含事件的初始化的selectpicker ，这些事件会更改现有的select选择器，而不是新的选择器。 您将需要重新创建新的<select> ，然后对克隆的行使用.selectpicker()再次对其进行初始化。

这是更新后的小提琴，其中将您的行提取到单独的模板中，该模板用于创建新行： https : //jsfiddle.net/x8s5evLo/