[Resolvido] Inserir e limpar conteúdo em div via Jquery

[michelmfreitas 1]

Olá pessoal!

 

Estou com algumas dúvidas e talvez alguns de vocês possam esclarecer por favor.

 

Tenho uma div no meu site, ela faz uma animação e insere conteúdo quando clico nela. Insiro um código HTML com formulário. Mas não consigo alterar o conteúdo do formulário e nem fechar a janela ao clicar no botão fechar.

 

Vejam do que estou falando: www.tribointerativa.com.br -> cliquem no item ATENDIMENTO AO CLIENTE. Ela não está fechando a janela, sempre volta. E quando eu clico em um campo input, ele não apaga seu conteúdo para edição.

 

Podem me ajudar?

 

Vejam o código JS:

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

               $("#atendimento").click(function(){
                   $(this).animate({height:'300px'}, 1000);
                   $(this).html("<a href='#' title='Atendimento ao cliente'><img src='img/icon_phone.jpg' alt='Atendimento ao cliente' align='absmiddle' style='margin-right:3px;' />Atendimento ao Cliente<img src='img/icon_seta.jpg' alt='Clique para Atendimento'  style='margin-left:10px;' /></a><h3><img src='img/tribo_liga.jpg' alt='A Tribo liga para você!' style='margin-top:20px;' /></h3><form method='POST' id='frmLigamos' action='?pagina=ligamos'><input type='text' class='input_ligamos' value='Nome Completo' /><input type='text' class='input_ligamos' value='E-mail' /><input type='text' class='input_ligamos' value='DDD' style='width:30px; margin-right:6px;' /><input type='text' class='input_ligamos' value='Telefone' style='width:150px;' /><input type='submit' value='OK' class='bt_ligamos' /></form><a href='#' title='fechar><img src='img/bt_fechar.jpg' id='bt_fechar' alt='fechar' style='margin-top:10px;' /></a> ");
               });

           });

           $("#bt_fechar").click(function(){
               $("#atendimento").stop().animate({height:'30px'}, 1000);
           });

           $(".input_ligamos").click(function(){
               $(this).val("");
           });

       </script>

[Nícolas 4]

Cara, muito provavel que tudo isso precisa ser executado após o documento ser carregado.

 

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

               $("#atendimento").click(function(){
                   $(this).animate({height:'300px'}, 1000);
                   $(this).html("<a href='#' title='Atendimento ao cliente'><img src='img/icon_phone.jpg' alt='Atendimento ao cliente' align='absmiddle' style='margin-right:3px;' />Atendimento ao Cliente<img src='img/icon_seta.jpg' alt='Clique para Atendimento'  style='margin-left:10px;' /></a><h3><img src='img/tribo_liga.jpg' alt='A Tribo liga para você!' style='margin-top:20px;' /></h3><form method='POST' id='frmLigamos' action='?pagina=ligamos'><input type='text' class='input_ligamos' value='Nome Completo' /><input type='text' class='input_ligamos' value='E-mail' /><input type='text' class='input_ligamos' value='DDD' style='width:30px; margin-right:6px;' /><input type='text' class='input_ligamos' value='Telefone' style='width:150px;' /><input type='submit' value='OK' class='bt_ligamos' /></form><a href='#' title='fechar><img src='img/bt_fechar.jpg' id='bt_fechar' alt='fechar' style='margin-top:10px;' /></a> ");
               });


           $("#bt_fechar").click(function(){
               $("#atendimento").stop().animate({height:'30px'}, 1000);
           });

           $(".input_ligamos").click(function(){
               $(this).val("");
           });

       });


       </script>

 

Tenta assim.

 

---------------------

obs: porque ao invez do animate você não usa o slideToggle?

 

obs2: como alguns dos elementos que você está tentando adicionar o evento não estão no DOM e sim são adicionados posteriormente pelo $(this).html();

 

Tudo que tiver dentro dele como o .input_ligamos você deve utilizar o live.

 

$(".input_ligamos").live('click',function(){
               $(this).val("");
           });

[michelmfreitas 1]

Valeu patrão, resolveu meu problema.

 

utilizei o slideToogle! =)