Parar propagação de evento no jQuery

Bom dia pessoal!

Aí vai uma dica rápida mas que pode ser uma dor de cabeça para muita gente.

Suponha que você fez uma tabela e cada linha ao ser clicada executa uma ação, por exemplo vai para uma tela de edição. Mas na mesma linha você colocou um botão para remover que ao ser clicado vai para outra. Exemplo:

<table id="lista" class="table table-hover table-bordered">
<thead>
    <tr>
        <th>Login</th>
        <th>Nome</th>
        <th></th>
    </tr>
</thead>
<tbody>
    <tr class="linha">
        <td>leandro</td>
        <td>Leandro</td>
        <td><button class="btn-remover" data-usuario="1"><i class="icon-trash"></i></button></td>
    </tr>
</tbody>
</table>

<script>
$(document).ready(function(){
    $('.linha').on('click',function(){
        alert('editar');
    });
    $('.btn-remover').on('click',function(){
        alert('remover');
    });
</script>

Mas quando você clica no botão remover, aparece remover, mas logo em seguida também aparece o editar. Pior, quando o click apenas redireciona para outra página, você vê apenas indo para a tela de edição.

Isso porque o evento “click” é propagado para todos os objetos clicados, mesmo que um esteja sobre o outro.

Solução: stopPropagation. Basta acrescentar esta linha no primeiro objeto, no nosso caso no botão remover (Não esqueça de usar o argumento “e” na definição da função):

$('.btn-remover').on('click',function(e){
    e.stopPropagation();
    alert('remover');
});

Referência:

http://api.jquery.com/event.stopPropagation/

Até a próxima!

Fazer o “click” funcionar após uma atualização via ajax

Boa noite!

Uma dica rápida sobre um problema que muitos já passaram, inclusive eu 🙂

Você fez uma página com um botão, por exemplo:

<a class="btn btn-primary" href="#">Salvar</a>

E adicionou uma funcionalidade à ele:

$('.btn').click(function(){
    alert('Salvando');
});

Tudo funcionando perfeitamente, mas você cria uma nova página cujo conteúdo é carregado via ajax e o mesmo código acima não funciona mais.

Continue lendo

Ferramentas do dia-a-dia

Bom dia!

Hoje vou falar um pouco sobre as ferramentas que uso no meu dia-a-dia de trabalho.

São escolhas baseadas em funcionalidades e gosto pessoal. Não quero entrar em brigas de uma ferramenta ser melhor do que a outra, então vou me limitar a falar das que uso atualmente e evitar comparações ao citar outras.

Vou apenas citar e falar brevemente de cada uma e, em posts futuros, entrarei em detalhes sobre algumas.

Continue lendo