Autocomple não funciona em inputs dinamicos criados por jquery.

[AndreTJD]

O primeiro input (o original) a autosugestão funciona corretamente, porém quando mando gerar mais inputs por jquery, a autosugestão não funciona.

Segue abaixo o meu código.

Autocomplete:

<script>
    $(function() {
        var availableTags = [
            <? $sugestao = mysql_query("Select nome from tb_produtos where loginadm='$loginadm'");
               $numsugestao = mysql_num_rows($sugestao);
             for($su=0;$su<$numsugestao;$su++){
                 $valor = mysql_fetch_assoc($sugestao);
                 if($su+1 <$numsugestao){ 
               echo '"'.$valor['nome'].'", '; }
               else{ echo '"'.$valor['nome'].'"';  }}?>
        ];
        $( "#sugestaop" ).autocomplete({
                                width: 260,
                    matchContains: true,
                    selectFirst: false,
            source: availableTags
        });
    });
    </script>

Criação de novos inputs:

<script>
 $(document).ready(function() { 
$("#add").click(function(){
var input = '<div class="produtos">';
    input += '<input name="produto[]" autocomplete="off" id="sugestaop" class="description" placeholder="Digite o nome ou código do produto" size="60" type="text">';
    input += '<a href="#" id="del">Deletar Campo</a></div>';
$("#novoscampos").append(input);
return false;
});
$("#del").live('click', function(){
    $(this).parent().remove();    
    });    });
</script>

Form:

<input name="produto[]" type="text" autocomplete="off" id="sugestaop" placeholder="Digite o nome ou código do produto" size="60"> <br><div id="novoscampos"></div>
            <a href="#" id="add">Adicionar Campo</a>

 

[rafaqueque]

Porque o jQuery aplica as alterações ao DOM no carregamento da página só. Procura por "jQuery live" que faz o que tu pretendes.

 

[AndreTJD]

Aqui ainda não deu certo.



Você queria que eu mudasse esta linha:

$("#add").live('click', function(){

 

[AndreTJD]

Resolvido

Problema resolvido:


O código ficou assim:

   <script>
    $(document).ready(function(){
        var availableTags = [
            <? $sugestao = mysql_query("Select nome from tb_produtos where loginadm='$loginadm'");
               $numsugestao = mysql_num_rows($sugestao);
             for($su=0;$su<$numsugestao;$su++){
                 $valor = mysql_fetch_assoc($sugestao);
                 if($su+1 <$numsugestao){ 
               echo '"'.$valor['nome'].'", '; }
               else{ echo '"'.$valor['nome'].'"';  }}?>    ];
$("#add").live("click", function(){
var input = '<div class="produtos">';
    input += '<input aria-haspopup="true" aria-autocomplete="list" role="textbox" class="ui-autocomplete-input" name="produto[]" autocomplete="off" placeholder="Digite o nome ou código do produto" size="60" type="text">';
    input += '<a href="#" id="del">Deletar Campo</a></div>';
$("#novoscampos").append(input);
    $("input[name='produto[]']").autocomplete({
        source: availableTags,
        width: 260 });
    });
    $("input[class='sugerir']").autocomplete({
        source: availableTags,
        width: 260 });
});
$("#del").live('click', function(){
    $(this).parent().remove();    
    });

    </script>

<input name="produto[]" type="text" autocomplete="off" id="sugestaop" placeholder="Digite o nome ou código do produto" class="sugerir" size="60"><br><div id="novoscampos"></div>
            <a href="#" id="add">Adicionar Campo</a>

Obrigado!

 

[cbangueses]

usa o on() em vez do live(), e caso o script que contem o on()/live() esteja a ser carregado por ajax mete um off() antes para garantir que nunca vais lançar mais do que 1 evento

"As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. "
$(document).off("click", "#del"); // So se ouver hipoteses de o codigo correr 2 para o mesmo documento
$(document).on("click", "#del", function () {
.....
});

O que isto faz é atribuir a funçao "function() {...}" ao evento "click" para o elemento $(document), desde que a origem do evento encaixe no selector "#del".

PS: podes usar um pai mais especifico em vez de $(document), assim n tens de subir tanto na arvore do DOM, mas a diferença não deve ser apreciavel a menos que seja um site altamente complexo.

 

[fvaladao]

Olá. Estou desesperado a procura de algo semelhante... Como ficou o código inteiro (arquivos php, js, consulta, etc...) pra eu estudar??