jQuery autocomplete для динамически создаваемых входов

Question

У меня возникла проблема с использованием автозаполнения jQuery с динамически создаваемыми входами (снова созданный с помощью jQuery). Я не могу получить автозаполнение для привязки к новым входам.

автозаполнения

 $("#description").autocomplete({ 
     source: function(request, response) { 
      $.ajax({ 
       url: "../../works_search", 
       dataType: "json", 
       type: "post", 
       data: { 
        maxRows: 15, 
        term: request.term 
       }, 
       success: function(data) { 
        response($.map(data.works, function(item) { 
         return { 
           label: item.description, 
           value: item.description 
         } 
        })) 
       } 
      }) 
     }, 
     minLength: 2, 
    }); 

Новая строка таблицы с входами

var i = 1; 
var $table = $("#works"); 
var $tableBody = $("tbody",$table); 

$('a#add').click(function() { 
    var newtr = $('<tr class="jobs"><td><input type="text" name="item[' + i + '][quantity]" /></td><td><input type="text" id="description" name="item[' + i + '][works_description]" /></td></tr>'); 
    $tableBody.append(newtr); 
    i++; 
}); 

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

Любые советы?

Answer 1

Сначала вы хотите сохранить параметры для .autocomplete() как:

var autocomp_opt={ 
     source: function(request, response) { 
      $.ajax({ 
       url: "../../works_search", 
       dataType: "json", 
       type: "post", 
       data: { 
        maxRows: 15, 
        term: request.term 
       }, 
       success: function(data) { 
        response($.map(data.works, function(item) { 
         return { 
           label: item.description, 
           value: item.description 
         } 
        })) 
       } 
      }) 
     }, 
     minLength: 2, 
    }; 

Это более аккуратным, чтобы использовать атрибут class для маркировки input, как:

<input type="text" class="description" name="item[' + i + '][works_description]" /> 

Последняя, ​​когда вам создайте новую строку таблицы, примените .autocomplete() с параметрами, уже сохраненными в autocomp_opt:

$('a#add').click(function() { 
    var newtr = $('<tr class="jobs"><td><input type="text" name="item[' + i + '][quantity]" /></td><td><input type="text" class="description" name="item[' + i + '][works_description]" /></td></tr>'); 
    $('.description', newtr).autocomplete(autocomp_opt); 
    $tableBody.append(newtr); 
    i++; 
}); 

Answer 2

я обнаружил, что мне нужно было поставить дэ автозаполнения после Append так:

$tableBody.append(newtr); 
$('.description', newtr).autocomplete(autocomp_opt);