Manipulação de classes com JQuery após inicialização da página

[Lucas Medina 17]

Fala, pessoal, bom dia!

Estou criando um script, que é na verdade bastante simples, e envolve dois botões:

 

<div class="buttons">
  <div class="clickable button inactive active">
    <span class="btn-label">Botão 1</span>
  </div>
  <div class="clickable button inactive">
    <span class="btn-label">Botão 2</span>
  </div>
</div>

Todos os botões tem as classes .button, .clickable, .inactive.

O verde possui a classe .active, que define ele como ativo (duh!)

 

Através do Jquery, estou tentando fazer com que o usuário possa clicar em um botão inativo, e consequentemente alterar o status do botão para ativo, desativando o primeiro.

/* Função de hover para o botão inativo */
$('.button').not('.active').hover(function(){
  $(this).addClass('hover');
}, function(){
  $(this).removeClass('hover');
});

/* Função de click para o botão inativo */
$('.button').not('.active').click(function(event) {
  var atual = $(event.currentTarget);
  $('.button').removeClass('active');
  atual.addClass('active');
});

O problema é: quando clico no botão inativo, e ele se torna ativo mas não herda as funções do seletor .not('.active').

Da mesma forma, o primeiro botão também não perdeu as funções do .not('.active'), e embora a classe mude, ele não pode ser clicado, e não recebe o hover.

 

É como se o JQuery estivesse verificando pelas classes uma única vez, e não consultando sempre que o evento ocorre (mais ou menos isso...)

 

Certamente existe algo que estou fazendo errado!

Alguém poderia me ajudar?

 

Obrigado!

[Rafael Sirotheau 43]

Você tem duas opções...

1- Tirar o .not() e dentro da função dar um return false; se $(this).hasClass('active').

 

2- Adicionar o eventListener ao mais próximo ancestral comum dos .button. Ex.

$('.buttons-container').on('click','.button:not(".active")',function(event) {
   ....
});

No caso do hover, seria precisar utilizar os eventos mouseenter e mouseleave

[Lucas Medina 17]

Você tem duas opções...

 

1- Tirar o .not() e dentro da função dar um return false; se $(this).hasClass('active').

 

2- Adicionar o eventListener ao mais próximo ancestral comum dos .button. Ex.

$('.buttons-container').on('click','.button:not(".active")',function(event) {
   ....
});

No caso do hover, seria precisar utilizar os eventos mouseenter e mouseleave

 

Excelente! As duas soluções funcionaram muito bem!

Mas tem alguma ideia de por que o evento não estava sendo executado? Digo, o hover() e o click() são métodos de evento, certo?

 

Substituí o not(), e passei a utilizar a exceção através do .hasClass('active').

Tudo supimpa! ;)

 

Consegui manter o uso do hover(), e manipulo a classe com o toggleClass(), também funcionou bem :)

 

Obrigado!

[Rafael Sirotheau 43]

Lucas,

É que ele só aplica os eventos uma vez, dependendo do seu script, no DOMReady ou no load. Sendo assim, se já existir um .button.active ele não vai receber o eventListener. Por isso, as soluções seriam ou remover o filtro (.not) ou adicionar o eventListener ao ancestral (event delegate). Adicionando no ancestral, o evento é disparado por ele, e, posteriormente, é que é feito o filtro pra saber qual o elemento alvo (neste caso, .button:not('.active') ).

 

É uma explicação bem rasa, mas, pra não complicar muito, é basicamente isto. :)

Da uma lida na documentação do .on(), que explicam melhor: http://api.jquery.com/on/

[Lucas Medina 17]

Lucas,

 

É que ele só aplica os eventos uma vez, dependendo do seu script, no DOMReady ou no load. Sendo assim, se já existir um .button.active ele não vai receber o eventListener. Por isso, as soluções seriam ou remover o filtro (.not) ou adicionar o eventListener ao ancestral (event delegate). Adicionando no ancestral, o evento é disparado por ele, e, posteriormente, é que é feito o filtro pra saber qual o elemento alvo (neste caso, .button:not('.active') ).

 

É uma explicação bem rasa, mas, pra não complicar muito, é basicamente isto. :)

 

Da uma lida na documentação do .on(), que explicam melhor: http://api.jquery.com/on/

 

Nem complica ;) entendi perfeitamente.

Eu achei que o evento atualizasse de forma automática, como por exemplo seria num setInterval, ou num requestFrameAnimation.

 

Obrigado, Rafael!