jQuery Autocomplete für dynamisch erstellte Eingaben

Question

Ich habe ein Problem mit jQuery Autocomplete mit dynamisch erstellten Eingaben (wieder mit jQuery erstellt). Ich kann keine automatische Vervollständigung erhalten, um an die neuen Eingaben zu binden.

automatische Vervollständigung

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

Neue Tabellenzeile mit Eingängen

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

Ich bin mir bewusst, dass das Problem aufgrund der Inhalte erstellt werden, nachdem die Seite geladen wurde aber ich kann nicht herausfinden, wie ich es umgehen kann. Ich habe einige verwandte Fragen gelesen und stoße auf die jQuery Live-Methode, aber ich bin immer noch in einem Jam!

Irgendwelche Ratschläge?

Answer 1

Zuerst werden Sie die Optionen für .autocomplete() wie speichern wollen:

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

Es ist mehr ordentlich die class Attribut zu verwenden, um die input für die Markierung, wie:

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

Last, wenn Sie Erstellen Sie eine neue Tabellenzeile Verwenden Sie die .autocomplete() mit den bereits in autocomp_opt gespeicherten Optionen:

I

Answer 2

festgestellt, dass ich brauchte teh zur automatischen Vervollständigung nach dem Anfügen setzen so:

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