Question

在单击glyphicon（+）时成功创建了行，但引导下拉列表（数据实时搜索）在第2行和其他行（克隆后）中不起作用。

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

＆＃13;

$(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
  });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

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

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

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

使用Glyphicon和Bootstrap克隆表行＆＃34;数据实时搜索＆＃34; （下拉）

1 个答案: