jQuery autocompletado para las entradas creadas de manera dinámica

Question

que estoy teniendo un problema usando jQuery autocompletado con entradas creadas de manera dinámica (de nuevo creado con jQuery). No puedo obtener autocompletar para enlazar a las nuevas entradas.

autocompletar

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

Nueva fila de la tabla con entradas

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

Soy consciente de que el problema se debe a los contenidos que se creó después de la página se ha cargado pero no puedo encontrar la forma de evitarlo. He leído varias preguntas relacionadas y me he encontrado con el método jQuery en vivo, ¡pero todavía estoy en un aprieto!

Algún consejo?

Answer 1

Primero usted desea almacenar las opciones de .autocomplete() como:

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 más ordenada para utilizar el atributo class para marcar el input, como:

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

pasado, cuando se crear una nueva fila de la tabla aplicar el .autocomplete() con las opciones ya almacenadas en 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

encontré que tenía que poner teh autocompletar después de la anexados de modo:

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