无法将动态引导选择添加到表答案

【问题标题】：Cannot add dynamic bootstrap select to table无法将动态引导选择添加到表
【发布时间】：2018-12-03 20:31:18
【问题描述】：

我正在尝试在如下定义的表中动态添加bootstrap-select：

<table id="myTable" class=" table order-list">
  <thead>
    <tr>
      <td>Select</td>
      <td>Name</td>
      <td>Gmail</td>
      <td>Phone</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="col-sm-4">
        <select class="selectpicker" data-style="select-with-transition" id="select0">
                                    <option>opt1</option>
                                     <option>opt2</option>
                                    </select>
      </td>
      <td class="col-sm-4">
        <input type="text" name="name" class="form-control" />
      </td>
      <td class="col-sm-4">
        <input type="mail" name="mail" class="form-control" />
      </td>
      <td class="col-sm-3">
        <input type="text" name="phone" class="form-control" />
      </td>
      <td class="col-sm-2"><a class="deleteRow"></a>

      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="5" style="text-align: left;">
        <input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
      </td>
    </tr>
    <tr>
    </tr>
  </tfoot>
</table>

基本上，当用户按下按钮时，我的脚本会在该表中创建新行。问题是您可以下载here 的新bootstrap-select 没有正确添加，实际上是不可见的。我不知道如何解决这个问题，有人可以帮助我吗？

这是js代码：

 $(document).ready(function() {
  var counter = 0;

  $("#addrow").on("click", function() {
    var newRow = $("<tr>");
    var cols = "";

    cols += '<td><select class="selectpicker" id="select' + counter + '"/></td>';
    cols += '<td><input type="text" class="form-control" name="name' + counter + '"/></td>';
    cols += '<td><input type="text" class="form-control" name="mail' + counter + '"/></td>';
    cols += '<td><input type="text" class="form-control" name="phone' + counter + '"/></td>';

    cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger "  value="Delete"></td>';
    newRow.append(cols);
    $("table.order-list").append(newRow);
    counter++;
  });



   $("table.order-list").on("click", ".ibtnDel", function(event) {
    $(this).closest("tr").remove();
    counter -= 1
   });


    });

和this is a working fiddle。

【问题讨论】：

您必须在所有应该初始化的新元素上初始化小部件。
@Taplar 我添加了 selectpicker 自动执行此操作的类，但在动态项目上没有
没有什么自动的。页面加载时的库可能会使用类自动初始化元素，但这仅在页面加载时。这就是为什么您必须在事后手动初始化您创建的任何内容。该插件不会轮询您的页面以查找获取该类或使用该类创建的元素。
@Taplar 好的，我试过了：$('#select'+counter).selectpicker(); 还是不行
$('select').selectpicker(); 在你的点击功能的最后一行如果你在你的小提琴上测试它会创建一个新的选择列表。不过，您仍然需要构建选项。可以说，仅克隆作为“主模板”的选择元素可能更容易。 jsfiddle.net/swry4okq

标签： javascript jquery html bootstrap-selectpicker

【解决方案1】：

我不确定您所说的 $(...).selectpicker() 是什么意思没有用，因为我在您的小提琴中对其进行了测试并且效果很好。我在这里分叉了https://jsfiddle.net/hpysz5xr/

代码如下。

$(document).ready(function() {
  var counter = 0;

  $("#addrow").on("click", function() {
    var newRow = $("<tr>");
    var cols = "";

    cols += '<td><select class="selectpicker" id="select' + counter + '"/></td>';
    cols += '<td><input type="text" class="form-control" name="name' + counter + '"/></td>';
    cols += '<td><input type="text" class="form-control" name="mail' + counter + '"/></td>';
    cols += '<td><input type="text" class="form-control" name="phone' + counter + '"/></td>';

    cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger "  value="Delete"></td>';
    newRow.append(cols);
    $("table.order-list").append(newRow);
    $('#select'+counter).selectpicker();
    counter++;
  });



  $("table.order-list").on("click", ".ibtnDel", function(event) {
    $(this).closest("tr").remove();
    counter -= 1
  });


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" class=" table order-list">
  <thead>
    <tr>
      <td>Select</td>
      <td>Name</td>
      <td>Gmail</td>
      <td>Phone</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="col-sm-4">
        <select class="selectpicker" data-style="select-with-transition" id="criteria0">
          <option>opt1</option>
          <option>opt2</option>
        </select>
      </td>
      <td class="col-sm-4">
        <input type="text" name="name" class="form-control" />
      </td>
      <td class="col-sm-4">
        <input type="mail" name="mail" class="form-control" />
      </td>
      <td class="col-sm-3">
        <input type="text" name="phone" class="form-control" />
      </td>
      <td class="col-sm-2">
        <a class="deleteRow"></a>

      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="5" style="text-align: left;">
        <input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
      </td>
    </tr>
    <tr>
    </tr>
  </tfoot>
</table>

【讨论】：