Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Vitor Luis_78306

[Resolvido] Executa a função múltiplas vezes quando era pra ser s

Por , em Javascript

Recommended Posts

Vitor Luis_78306    0

Vitor Luis_78306
Postado

Fala galera,

Estou com um probleminha antigo em um select personalizado que estou desenvolvendo, vocês podem acompanhar o funcionamento e o código aqui.

 

Tudo funciona bem, mas se selecionarmos um item, e depois selecionarmos outro, vamos ver que ele insere a segunda seleção duas vezes, quando na verdade era para ser apenas uma! E assim vai gradativamente, na terceira seleção ele adiciona três vezes, na milésima, mil vezes! Porque isso ocorre? Como arrumar?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gaw    5

Gaw
Postado

Testa aew:

<!doctype html>
<html>
   <head>
       <meta charset="utf-8">
       <title>Documento sem título</title>

       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

       <style>
           .jSelect{
               background:#FFF; 
               font:13px 'Arial'; 
               width:250px; 
               height:25px; 
               border:solid 1px #CCC; 
               float:left; 
               position:relative; 
               z-index:95; 
           }
           .jSelect p{
               width:215px; 
               height:17px; 
               padding:4px 5px; 
               margin:0; 
               float:left; 
           }
           .jSelect span{ 
               color:#C00; 
               font-size:15px; 
               text-align:center; 
               width:25px; 
               height:19px; 
               padding:3px 0; 
               cursor:pointer; 
               float:right; 
           }
           .jSelect ul{ 
               background:#FFF; 
               border:solid 1px #CCC; 
               border-top:none; 
               width:213px; 
               height:auto; 
               list-style:none; 
               padding:0 5px; 
               margin:0; 
               display:none; 
               float:left; 
               position:absolute; 
               top:27px;
           }
           .jSelect ul li{
               width:100%; 
               height:auto; 
               padding:3px 0; 
               cursor:pointer; 
           }
           .Result{ 
               width:250px; 
               height:auto; 
               border:solid 1px #CCC; 
               margin-top:15px; 
               float:left;
           }
       </style>
   </head>

   <body>
       <div class="jSelect" id="TxtText">
           <p>Select a item</p>
           <span>ν</span>

           <ul>
               <li id="Option_01">Option 01</li>
               <li id="Option_02">Option 02</li>
               <li id="Option_03">Option 03</li>
               <li id="Option_04">Option 04</li>
           </ul>
       </div>

       <br clear="all"/>

       <div class="Result">
           Results:<br/>
       </div>
       <script>
           $('.jSelect span').click(function(){
               $('.jSelect ul').slideDown('slow');
           });
           $(document).click(function(e){
               if(!$(e.target).closest('.jSelect').length){
                   $('.jSelect ul').slideUp('fast');
               }
           });

           $('.jSelect li').click(function(){
               $('.jSelect ul').slideUp('fast');

               var cont = $(this).attr('id');
               $('.Result').append(cont + '<br>');
           });
       </script>
   </body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gaw    5

Gaw
Postado

Você colocou um evento "click" dentro de outro evento "click":

 

<script>
           $('.jSelect span').click(function(){
               $('.jSelect ul').slideDown('slow');

           $(document).click(function(e){
               if(!$(e.target).closest('.jSelect').length){
                   $('.jSelect ul').slideUp('fast');
               }
           });

           $('.jSelect li').click(function(){
               $('.jSelect ul').slideUp('fast');

               var cont = $(this).attr('id');
               $('.Result').append(cont + '<br>');
           });
       });
</script>

 

isso forma um loop, por isso você via duplicar, triplicar, quadruplicar etc... eu só tirei o "loop":

 

<script>
           $('.jSelect span').click(function(){
               $('.jSelect ul').slideDown('slow');
           });
           $(document).click(function(e){
               if(!$(e.target).closest('.jSelect').length){
                   $('.jSelect ul').slideUp('fast');
               }
           });

           $('.jSelect li').click(function(){
               $('.jSelect ul').slideUp('fast');

               var cont = $(this).attr('id');
               $('.Result').append(cont + '<br>');
           });
</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito