Tự động điền jQuery cho các đầu vào được tạo động

Question

Tôi gặp sự cố khi sử dụng tính năng tự động hoàn thành jQuery với các đầu vào được tạo động (được tạo lại bằng jQuery). Tôi không thể tự động điền để liên kết với các đầu vào mới.

Autocomplete

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

dòng của bảng mới với đầu vào

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

Tôi biết rằng vấn đề là do nội dung được tạo ra sau khi trang đã được tải nhưng tôi không thể tìm ra cách để vượt qua nó. Tôi đã đọc một số câu hỏi liên quan và đi qua các phương pháp sống jQuery nhưng tôi vẫn còn trong một mứt!

Bạn có lời khuyên nào không?

Answer 1

Trước tiên, bạn sẽ muốn để lưu trữ các tùy chọn cho .autocomplete() như:

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

Đó là gọn gàng hơn để sử dụng các thuộc tính class để đánh dấu các input, như:

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

ngoái, khi bạn tạo một hàng bảng mới áp dụng .autocomplete() với các tùy chọn đã được lưu trữ trong 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

tôi thấy rằng tôi cần thiết để đưa teh autocomplete sau khi append vậy:

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