无法将动态 bootstrap select 添加到 table

Question

我正在尝试在 table 中动态添加一个 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>

基本上我的脚本会在用户按下按钮时为 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.

Answer 1

我不确定你所说的 $(...).selectpicker() 是什么意思没有用，因为我在你的 fiddle 上测试过它，它工作得很好。我在这里分叉了 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>

无法将动态 bootstrap select 添加到 table

Cannot add dynamic bootstrap select to table

javascript

jquery

html

bootstrap-selectpicker