1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

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

Discussão em 'Web Development' iniciada por AndreTJD, 10 de Agosto de 2012. (Respostas: 4; Visualizações: 1731)

  1. 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:
    Código:
    <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:
    Código:
    <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:
    Código:
    <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>
     
  2. rafaqueque

    rafaqueque Power Member

    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.
     
  3. Aqui ainda não deu certo.



    Você queria que eu mudasse esta linha:
    Código:
    $("#add").live('click', function(){
     
  4. Resolvido

    Problema resolvido:


    O código ficou assim:


    Código:
       <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>

    Código:
    <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!
     
  5. 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.
     

Partilhar esta Página