jQuery completamento automatico per gli input creati dinamicamente

Question

Sto riscontrando un problema utilizzando il completamento automatico di jQuery con gli input creati dinamicamente (ancora creati con jQuery). Non riesco a ottenere il completamento automatico per associare i nuovi input.

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

Nuova riga della tabella con gli ingressi

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

Sono consapevole del fatto che il problema è dovuto al contenuto che viene creato dopo la pagina è stata eseguita ma non riesco a capire come aggirarlo. Ho letto diverse domande correlate e ho incontrato il metodo jQuery dal vivo, ma sono ancora in una marmellata!

Qualche consiglio?

Answer 1

In primo luogo si desidera memorizzare le opzioni per .autocomplete() come:

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

E 'più pulito per utilizzare l'attributo class per la marcatura del input, come:

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

scorso, quando si creare una nuova riga tabella applicare .autocomplete() con le opzioni già memorizzate in 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

ho scoperto che avevo bisogno di mettere Teh completamento automatico dopo l'accodamento così:

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