5

Estou tentando fazer a delegação de um evento click à um link dentro de uma tabela, como mostra este exemplo do jsFiddle:

O resultado obtido como podem ver, é:

  • Ao clicar no link "Ativar", o evento click atribuído à classe .activate é disparado, alterando assim a classe do mesmo link para .deactivate.
  • Ao clicar no link "Desativar", o evento click atribuído à classe .activate é disparado novamente mas não acontecendo nada, e o correto seria a execução do evento click alterando novamente a sua classe para .activate.

Para um melhor entendimento, por favor abram o link do jsFiddle.

Pegando alguns exemplos que já havia feito, e pesquisando sobre casos parecidos com o meu, descobri que deveria delegar o evento da seguinte forma:

$(document).on("click", "#element", function (e) {});

No entanto não obtive o resultado esperado, como podem ver neste outro exemplo do jsFiddle.
Estou à disposição para acrescentar mais informações, se necessário.

2 Respostas 2

5

Eu acho que o melhor seria fazer isso numa só função utilizando um if/else e apontando o clique para uma class (que neste caso não poderia ser um id pois isto vai ser utilizado mais que uma vez) que não seja modificada devido a interacções do usuário para evitar conflitos, como neste exemplo abaixo:

$('.status').click(function() {
    if ($(this).hasClass('ativar')) {
        $(this).removeClass('ativar').addClass('desativar').text('Ativar');
    }
    else {
        $(this).removeClass('desativar').addClass('ativar').text('Desativar');
    }
});
th,td {
    border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="content">
    <table>
        <thead>
            <tr>
                <th>Titulo 1</th>
                <th>Titulo 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Campo 1</td>
                <td>Campo 2</td>
                <td><a href="#" class="status">Ativar</a></td>
            </tr>
            <tr>
                <td>Campo 3</td>
                <td>Campo 4</td>
                <td><a href="#" class="status">Ativar</a></td>
            </tr>
        </tbody>
    </table>
</div>

1
  • 1
    Muito obrigado, funcionou perfeitamente para mim! Commented 15/10/2015 às 5:24
5

O teu código estava certo! Só esqueceste de juntar o jQuery no jsFiddle.

Se quiseres comprimir ainda mais o código podes fazer assim:

$('.content tbody').on("click", ".activate, .deactivate", function (e) {
    e.preventDefault();
    var ativo = $(this).hasClass('activate');
    $(this).html(ativo ? "Desativar" : "Ativar").toggleClass("activate deactivate");
});

Exemplo: http://jsfiddle.net/am2h9149/

1
  • 2
    Nossa! uma solução ainda mais simples, muito obrigado! Com certeza será de grande utilidade. :) Commented 15/10/2015 às 6:19

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .