Autocomplete em input dinâmico

Bom dia amigos.

Realizei diversas pesquisas, porém não consegui resolver o problema.

Em campos normais do formulário, o Autocomplete está funcionando normalmente.

Não estou conseguindo fazer funcionar em input dinâmico, dentro de uma tabela onde posso inserir diversas linhas.

Meu campo:

<div id="list" class="row-fluid">
<table class="table" cellspacing="1" cellpadding="1" id="detalhes">
 <caption>Detalhes do Documento</caption>
 <thead>
 <tr>
 <th style="text-align:center; background: #FFFF99;">Produto</th>
 </tr>
 </thead>

<?php

for($i=0; $i<count($produto); $i++) {

?>

 <tbody>
 <tr>
 <td><?php $y=$i+1; echo"$y"; ?>
 <td>
 <input name="produto[]" id="produto" type="text" size="12" maxlength="10" value="<?php echo "$produto[$i]";?>">
 </td>
 </tr>
 </tbody>

<?php } // Fecha "for" ?>

 <tfoot>
 <tr>
 <td colspan="4">
 <button type="button" class="btn-mini btn-primary" onclick="addRowToTable();">Adicionar</button>
 <button type="button" class="btn-mini btn-danger" onclick="removeRowFromTable();">Remover</button>
 <button type="button" class="btn-mini btn-success" href="#" data-toggle="modal" data-target="#modal_cad_produto" title="Clique aqui para cadastrar um novo Produto!">Cadastrar Novo Produto</button>
 </td>
 </tr>
 </tfoot>

</table>

	Meu código js para adicionar/remover inputs dinâmicos:

<script language="javascript" type="text/javascript">
function addRowToTable() {
var tbl = document.getElementById('detalhes');
//var lastRow = tbl.rows.length -1;
var lastRow = tbl.rows.length;

// if there's no header row in the table, then iteration = lastRow + 1 - //se não houver cabeçalho da linha da tabela, depois iteração lastRow + 1

var iteration = lastRow - 1;
//var row = tbl.insertRow(lastRow + 1); // cria outra linha
var row = tbl.insertRow(lastRow); // cria outra linha

// NÚMERO DA CÉLULA

var cellLeft = row.insertCell(0); // insere uma celula a esquerda
var textNode = document.createTextNode(iteration); // esquerda cria o numero
cellLeft.setAttribute('align', 'center');
cellLeft.setAttribute('class', 'branco');

cellLeft.appendChild(textNode); // fecha a celular da esquerda

// right cell (Produto)

var cellRight1 = row.insertCell(1);
var e1 = document.createElement('input');
cellRight1.setAttribute('align', 'left');
e1.setAttribute('class', 'campo');
e1.setAttribute('type', 'text');
e1.setAttribute('name', 'produto');
e1.setAttribute('id', 'produto');
e1.setAttribute('maxlength', '7');
e1.setAttribute('value', '');
e1.setAttribute('size', '10');
//e1.setAttribute('onkeyup', 'multiplica(' + iteration + ')');
e1.setAttribute('onkeypress', 'return handleEnter(this, event)');
cellRight1.appendChild(e1);

function removeRowFromTable() {
 var tbl = document.getElementById('detalhes');
 var lastRow = tbl.rows.length;
 if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
</script>

	 

	Meu código Autocomplete:

<script type="text/javascript">
$(document).ready(function() {

$('#detalhes').find('.produto').autocomplete({
source: "ajx_pes_p_nom.php",
minLength: 1,

});
});
</script>

	No aguardo

	Att

function addRowToTable() {
 .
 .
 .
 cellRight1.appendChild(e1);
}

	**Segundo**: Seu código JQuery que aplica o AutoComplete deve ficar assim:

<script type="text/javascript">
 $(document).on('DOMNodeInserted','#detalhes .campo', function(){
 $(this).autocomplete({
 source: "ajx_pes_p_nom.php",
 minLength: 1,
 });
 });
</script>

	Para atribuir eventos a elementos criados dinamicamente, deve-se utilizar o método  **$(document).on(...). **Veja no link abaixo.

	**[http://www.kadunew.com/blog/jquery/atribuindo-eventos-a-elementos-criados-dinamicamente](http://www.kadunew.com/blog/jquery/atribuindo-eventos-a-elementos-criados-dinamicamente)**

	Abraço.

<script type="text/javascript">
$(document).on('DOMNodeInserted','#detalhes .produto', function(){
 $(this).autocomplete({
 source: "ajx_prod_p_nom.php",
 minLength: 1,
 });
});

</script>

	No campo produto incluí ainda: