Autouzupełnianie jQuery dla dynamicznie tworzonych wejść

Question

Mam problem z wykorzystaniem autouzupełniania jQuery z dynamicznie tworzonymi wejściami (ponownie utworzone za pomocą jQuery). Nie mogę włączyć autouzupełniania, aby powiązać nowe dane wejściowe.

autouzupełnianie

 $("#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, 
    }); 

Nowy wiersz tabeli z wejściami

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++; 
}); 

Zdaję sobie sprawę, że problem wynika z treści tworzone po stronie został załadowany ale nie mogę wymyślić, jak sobie z tym poradzić. Czytałem kilka powiązanych pytań i natrafiłem na metodę live jQuery, ale wciąż jestem w jamie!

Każda rada?

Answer 1

Najpierw będziemy chcieli, aby zapisać opcje .autocomplete() jak:

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, 
    }; 

To bardziej schludny użyć atrybutu class dla oznakowania input, jak:

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

końcu, kiedy cię utwórz nowy wiersz tabeli Zastosuj .autocomplete() z opcjami już zapisanymi w 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

znalazłem, że muszę umieścić teh autouzupełniania po append tak:

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