I\'m a bit confused as to why this isn\'t working; I assume that because I\'m adding the class and its not being added back into the collection I\'m not sure.
Here i
Not sure if you already know about this or not.... Check the jquery documentation on the .live() functionality. That way, you could do something like this.
$('.optional').live('click', function () {
$(this).removeClass('optional').addClass('selected');
return false;
});
And then you don't have to worry about classes not existing at document load. As the classes change on the elements, they'll automatically be bound to.
It's because the click handlers are only applied to those elements that match at document load. You should use a separate class to identify all of the links, then set up a single click handler that looks at the class that the link has and then does the appropriate class transformation.
$(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>
You can change your code like this
$(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;
});
You can also change your click handler to the live click handler:
$(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');
});
});