Это потому, что обработчики кликов применяются только к тем элементам, которые совпадают при загрузке документа. Вы должны использовать отдельный класс для идентификации всех ссылок, затем настроить обработчик одного клика, который просматривает класс, который имеет ссылка, а затем выполняет соответствующее преобразование класса.
$(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>