Строка клонирования таблицы с Glyphicon и Bootstrap «Поиск данных в реальном времени» (выпадающий список)

Question

Строки, созданные успешно при нажатии на глифик (+), но выпадающий список начальной загрузки (поиск данных в реальном времени) не работает во 2-й строке и других строках (после клонирования).

Вот прикрепленный исполняемый код.Пожалуйста, дайте мне знать решение.

$(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> и инициализировать его снова, используя .selectpicker() для клонированной строки.

Вот обновленная скрипка, где я извлек вашу строку в отдельный шаблон, который используется для созданияновые строки: https://jsfiddle.net/x8s5evLo/