JQuery OnClick não está acontecendo pela segunda vez
-
20-09-2019 - |
Pergunta
Estou um pouco confuso sobre por que isso não está funcionando; Presumo que, porque estou adicionando a classe e não está sendo adicionado de volta à coleção, não tenho certeza.
Aqui está em um jsbin http://jsbin.com/ayije Embora o código também esteja abaixo.
De qualquer maneira, só posso fazer com que a ação aconteça em um elemento uma vez.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('.optional').click(function () {
$(this).removeClass('optional').addClass('selected');
return false;
});
$('.selected').click(function () {
$(this).removeClass('selected').addClass('rejected');
return false;
});
$('.rejected').click(function () {
$(this).removeClass('rejected').addClass('optional');
return false;
});
});
</script>
</head>
<body>
<style>
a {padding:2px;color:white;}
.optional {background-color:blue;}
.selected {background-color:green;}
.rejected {background-color:red;}
</style>
<div id="tagContainer">
<a href="#" class="rejected">a</a>
<a href="#" class="optional"">b</a>
<a href="#" class="selected">c</a>
</div>
</body>
</html>
Solução
É porque os manipuladores de cliques são aplicados apenas aos elementos que correspondem à carga do documento. Você deve usar uma classe separada para identificar todos os links e configurar um único manipulador de cliques que analisa a classe que o link possui e, em seguida, faz a transformação de classe apropriada.
$(document).ready(function () {
$('.clickable').click(function () {
var $this = $(this);
if ($this.hasClass('optional')) {
$this.removeClass('optional').addClass('selected');
}
else if ($this.hasClass('selected')) {
$this.removeClass('selected').addClass('rejected');
}
else if ($this.hasClass('rejected')) {
$this.removeClass('rejected').addClass('optional');
}
return false;
});
});
<div id="tagContainer">
<a href="#" class="clickable rejected">a</a>
<a href="#" class="clickable optional">b</a>
<a href="#" class="clickable selected">c</a>
</div>
Outras dicas
Não tenho certeza se você já sabe sobre isso ou não .... verifique a documentação do jQuery no .viver() funcionalidade. Dessa forma, você poderia fazer algo assim.
$('.optional').live('click', function () {
$(this).removeClass('optional').addClass('selected');
return false;
});
E então você não precisa se preocupar com as aulas não existentes na carga do documento. À medida que as classes mudam nos elementos, eles estarão automaticamente vinculados.
Você pode alterar seu código assim
$(document).on("click", ".clickable", function(){
var $this = $(this);
if ($this.hasClass('optional')) {
$this.removeClass('optional').addClass('selected');
}
else if ($this.hasClass('selected')) {
$this.removeClass('selected').addClass('rejected');
}
else if ($this.hasClass('rejected')) {
$this.removeClass('rejected').addClass('optional');
}
return false;
});
Você também pode alterar seu manipulador de cliques para o manipulador de cliques ao vivo:
$(document).ready(function () {
$('.optional').live('click',function () {
$(this).removeClass('optional').addClass('selected'); return false;
});
$('.selected').live('click',function () {
$(this).removeClass('selected').addClass('rejected'); return false;
});
$('.rejected').live('click',function () {
$(this).removeClass('rejected').addClass('optional');
});
});