Чтобы делегировать typehead для динамически сгенерированного ввода

У меня есть html-таблица, которую я использую для ввода сведений о инвентаре. В этой таблице у меня есть поле ввода для имени продукта, к которому я привязываю событие начального ввода начальной загрузки. Но проблема в том, что для первого поля ввода строки, которое уже присутствует на странице, когда она отображается, typeahead работает нормально. Но когда я добавляю новые строки для большего количества записей, typeahead не работает с ними. Я знаю о концепции делегирования событий, но проблема в том, что я не знаю, как это сделать. я реализую это в этом случае. Пожалуйста, проведите меня через это. Заранее спасибо. Вот моя таблица html-

<table>
<thead>
<tr>
<td>Product name</td>
<td>Amount</td>
</tr>
</thead>
<tbody class="details">
<tr>
<td><input type="text class="items" name="items" id="items" data-provide="typeahead" /> </td>
<td><input type="text" name="amt" id="amt" class="amt" /></td>
</tr>
</tbody>
</table>

вот javascript, используемый для добавления новых строк-

$(function(){
  $('#add').click(function(){
    addnewrow();
  });
});
function addnewrow(){
 var tr = '<tr>'+
'<td><input type="text" name="items" id="items" class="items" data-provide="typeahead" autocomplete="off" /></td>'+
'<td><input type="text" name="amt" id="amt" class="amt" autocomplete="off" /></td>'+
'</tr>';
$('.details').append(tr);
}

Вот как я использовал typeahead:

 $(function(){
    $('#items').typeahead({
  source: function(query,process){
    $.ajax({
         url: 'itemexist.php',
         type: 'POST',
         data: 'query=' +query,
         dataType: 'JSON',
         async: true,
         success: function(data){
          process(data);
         }
    });
  }

  });
});

Я знаю, что этот вопрос задавался раньше, но принятого решения нет, и я пробовал эти решения, но они не работают. Вот что я пробовал, но все равно это не работает -

$(document).on("keypress",".items",function(){
 $('.items').typeahead({
  source: function(query,process){

    $.ajax({
         url: 'itemexist.php',
         type: 'POST',
         data: 'query=' +query,
         dataType: 'JSON',
         async: true,
         success: function(data){
          process(data);
         }
    });
  }

  });
 });

javascript html jquery twitter-bootstrap event-delegation
person payal_suthar    schedule 27.08.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Что ж, я добился этого. Я публикую это, чтобы это могло помочь кому-то еще. Вот решение -

 $(function(){
 $('body').delegate('.items','focus',function(){
 $(this).typeahead({
  source: function(query,process){

    $.ajax({
         url: 'itemexist.php',
         type: 'POST',
         data: 'query=' +query,
         dataType: 'JSON',
         async: true,
         success: function(data){
          process(data);
         }
    });
  }

  });
 });
  });
person payal_suthar    schedule 27.08.2016