Код Jquery внутри клонированного элемента подключен неправильно

Я пытаюсь создать расширяемую форму, которая включает в себя некоторые элементы автозаполнения jquery-ui, но выпадающие меню автозаполнения не будут правильно прикреплены к форме; вместо этого они вызывают исходные (скрытые) элементы формы независимо от того, какой клон выбран.

Если вы посмотрите на мой фрагмент кода: нажатие кнопки "Добавить строку" создает клон моей скрытой строки таблицы, а выбор ячеек "Элемент" или "Корректировка" приводит к появлению меню выбора в углу. Выбор чего-либо из этих меню ничего не делает в ячейке.

Что должно произойти, так это то, что клонированные ячейки "Элемент" и "Корректировка" должны вести себя так же, как и ячейка "Пользователь" выше.

Может ли кто-нибудь помочь мне в этом?

HTML / Javascript

// Field Cloning
$(document).ready(function(e) {
  $('a.group_add').on('click', function() {
    var cloned = $('#rowToClone').clone(true);

    cloned.find(':input').each(function() {
      switch (this.type) {
        case 'text':
          this.value = '';
          break;
        case 'textarea':
          this.value = '';
          break;
        case 'checkbox':
        case 'radio':
          this.checked = false;
          break;
      }
    });

    $('.all_group').append(cloned);
  });

  $('table.all_group').on('click', '.group_remove', function() {
    var tr = this.parentElement.parentElement;
    tr.remove();
  });
});

$(function() {
  var items_list = ['Item 1', 'Item 2', 'Item 3', 'Item 4', ];
  $(".items_list").autocomplete({
    source: items_list,
    minLength: 0
  });
  $(".items_list").click(function() {
    $(this).autocomplete("search", "");
  });
});

$(function() {
  var item_adj_list = ['Adj 1', 'Adj 2', 'Adj 3'];
  $(".item_adj_list").autocomplete({
    source: item_adj_list,
    minLength: 0
  });
  $(".item_adj_list").click(function() {
    $(this).autocomplete("search", "");
  });
});

$(function() {
  var users_list = ['User 1', 'User 2', 'User 3', ];
  $(".users_list").autocomplete({
    source: users_list,
    minLength: 0
  });
  $(".users_list").click(function() {
    $(this).autocomplete("search", "");
  });
});
#cloneTable {
  display: none;
}

.f_label {
  font-weight: bold;
}

.group_1 {
  border-collapse: collapse;
}

.group_1 .f_input {
  padding: 0;
  margin: 0;
}

.group_1 .f_input textarea {
  margin-top: 3px;
  resize: none;
}

.group_row {
  margin-bottom: 0;
}

.group_add {
  border: 1px solid #888;
  text-decoration: none;
  background-color: #ccc;
  color: #000;
  padding: 2px;
}

.group_remove {
  text-decoration: none;
  color: #aa0000;
}
<head>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>

<body>

  <table id='cloneTable'>
    <tr id='rowToClone'>
      <!-- Item -->
      <td class="f_input">
        <input type="text" class="items_list auto_list" name="list_items[]" value="" size="8"><br>
      </td>

      <!-- Description -->
      <td class="f_input">
        <textarea name="list_desc[]" rows="1" cols="25"></textarea><br>
      </td>

      <!-- Qty -->
      <td class="f_input">
        <input type="text" name="list_qty[]" value="" size="1"><br>
      </td>

      <!-- Adjustment -->
      <td class="f_input">
        <input type="text" class="item_adj_list auto_list" name="list_adj[]" value="" size="8"><br>
      </td>

      <td class="remove_td">&nbsp;<a href="#" class="group_remove">X</a></td>
    </tr>
  </table>

  <form>
    <!-- Customer -->
    <div class="field_cust_id all_field">
      <div class="f_label">User</div>
      <div class="f_input">
        <input type="text" class="users_list ui-autocomplete-input" name="cust_id" value=""><br>
      </div>
    </div>

    <br>
    <table class='group_1 all_group'>
      <tr>
        <td class='f_label'>Item</td>
        <td class='f_label'>Description</td>
        <td class='f_label'>Qty</td>
        <td class='f_label'>Adjustment</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    <br><a href='#' class='group_add'>+ Add Row</a>

    <br><br><br><input type='submit' value='Submit'>
  </form>
</body>

Источник

0 ответов

Другие вопросы по тегам