Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17639
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Fazer o elemento interno não receber o click externo jQuery

29-05-2014 21:02

Quando adicionamos um evento click ou outro a determinado elemento usando o jQuery, quando por exemplo, usamos o append para adicionar um elemento interno a div, esse novo elemento acaba acionando o mesmo evento do elemento principal.

Como mostrado nesse exemplo

<style> #alvo{border:1px solid #ccc;} #novadiv{border:1px solid #000;} </style>


<script src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#alvo').click(function() { $(this).append('<div id="novadiv">nova div</div>'); }); }); </script>


<div id="alvo">ALVO</div>

Como mostrado no exemplo, o documento irá carregar com uma div ALVO e adicionar a novadiv dentro da ALVO.
O problema, é que tanto ao clicar na div ALVO quanto na div novadiv vai acionar o evento do click, adicionando a novadiv toda vez que clicar no elemento principal ou no elemento interno.

Para solucionar esse problema, temos que adicionar uma linha para focar o evento só no elemento principal da função.

Segue o exemplo completo

<style> #alvo{border:1px solid #ccc;} #novadiv{border:1px solid #000;} </style>


<script src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#alvo').click(function(e) { if(e.target != this) return; $(this).append('<div id="novadiv">nova div</div>'); }); }); </script>


<div id="alvo">ALVO</div>

0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado