Typehead JS не работает на нескольких входах с одинаковыми классами - PullRequest
Новая
       44

Typehead JS не работает на нескольких входах с одинаковыми классами

0 голосов
/ 28 февраля 2019

Проблема, с которой я сталкиваюсь, связана с системой выставления счетов.По умолчанию существует одна строка, но если существует более одного продукта, пользователь может Добавить новый элемент , который добавляет новую строку с функцией добавления jQuery.

Система выставления счетов имеет несколько входов, один из которыхих имя элемента, которое автоматически заполняется Typehead JS.

Код предопределенной строки 

<tbody id="TableBody">
  <tr>
    <td style="width: 220px">
      <input type="text" class="form-control Item" name="Item" id="Item" placeholder="Nombre del producto" required autocomplete="off">
    </td>
    <td>
      <input type="number" name="QTV" min="1" name="QTV" id="QTV" class="form-control text-right" placeholder="00" required>
    </td>
    <td>
      <input step="2" type="number" class="form-control text-right" min="1" id="Rate" placeholder="0.00" readonly>
    </td>
    <td>
      <input step="any" id="Disc" name="Disc" type="number" min="0" name="" class="form-control text-right" placeholder="00">
    </td>
    <td>
      <input type="text" name="SubTotal" class="form-control text-right" id="Total" placeholder="Total" readonly>
    </td>
    <td>
      <button type="button" class="btn btn-danger DelRow">Delete</button>
    </td>
  </tr>
</tbody>

Код для добавления новой строки 

$('#AddNewItem').click(function() { $('#TableBody').append(`
<tr>
  <td style='width: 220px'>
    <input type='text' class='form-control Item' name='Item' id='Item' placeholder='Nombre del producto' required autocomplete='off'>
  </td>
  <td>
    <input type='number' name='QTV' min='1' name='QTV' id='QTV' class='form-control text-right' placeholder='00' required>
  </td>
  <td>
    <input step='2' type='number' class='form-control text-right' min='1' id='Rate' placeholder='0.00' readonly>
  </td>
  <td>
    <input step='any' id='Disc' name='Disc' type='number' min='0' name='' class='form-control text-right' placeholder='00'>
  </td>
  <td>
    <input type='text' name='SubTotal' class='form-control text-right' id='Total' placeholder='Total' readonly>
  </td>
  <td>
    <button type="button" class="btn btn-danger DelRow">Delete</button>
  </td>
</tr>
`); });

Код для отображения Авто предложения 

$(document).ready(function() {
	$('.Item').typeahead({
		source:  function (query, process) {
		return $.get('FetchItem.php?Item', { query: query }, function (data) {				
				data = $.parseJSON(data);
				return process(data);
			});
		},
	});
});

Я просто хотел показать предложения по всем дополнительным добавленным полям.Любая помощь будет высоко ценится, спасибо

Скриншот

1 Ответ

0 голосов
/ 28 февраля 2019

В конце концов, я получил решение моего ответа.

Я использовал функцию загрузки документов jQuery, которая не работала с добавленными строками.

Так что вместо $(document).ready(function() { я просто использовал $('.TableBody').on("click", ".Item", function() {, и это сработало.

...