Почему не работает переключение ссылки

[CaguCT]

код:
<a href="#" class="onautosave">Включить автосохранение</a>
//<![CDATA[

$(document).ready(function(e) {
$(".onautosave").click(function() {
$(this).html("Включить editor");
$(this).removeClass();
$(this).addClass("offautosave");
return false;
});
$(".offautosave").click(function() {
$(this).html("Выключить editor");
$(this).removeClass();
$(this).addClass("onautosave");
return false;
});
});
//]]>



пример тут http://jsfiddle.net/e8FTc/3/

Нажимается только один раз, не могу понять в чем прикол.

[danik.js]

Вы не правильно понимаете принцип работы.
$(".offautosave").click(function() { }) - вот этот код ничего не сделает, так как на момент его выполнения нет ни одного элемента с классом .offautosave (он же у вас появится только после нажатия на ссылку, верно?) Поэтому и обработчик не на что вешать.
А первый обработчик будет всегда отрабатывать вне зависимости от текущего класса, ибо он ведь уже навешен на элемент и вы его не удалили.
Сделайте так:

$(document).ready(function(e) {
var states = {
on: {text: 'Включить editor', next: 'off'},
off: {text: 'Выключить editor', next: 'on'}
};
$(".autosave").click(function(event) {
var state = $(this).data('state') || 'on';
$(this).removeClass(state);
state = states[state].next;
$(this).html(states[state].text);
$(this).addClass(state);
$(this).data('state', state);
event.preventDefault();
});
});

Для стилей используйте .autosave.on и .autosave.off

И еще - использовать <![CDATA[ никчему если у вас не XHTML

[CaguCT]

Спасибо огромное, буду разбираться в том что Вы написали.
Хотя все равно не понимаю, делал подобное на другом сайте с таким кодом:

в head:
$(document).ready(function(){
var editor = $.cookie('editor');
if( editor != null && editor=='on' )
{
$(".editoron").text("Выключить editor");
$(".editoron").addClass("editoroff");
$(".editoron").removeClass("editoron");
}
$(".editoron").click(function() {
if( $.cookie('editor') != 'on' )
{
$.cookie('editor', 'on', {expires:31, path:"/"});
$(this).text("Выключить editor");
$(this).removeClass();
$(this).addClass("editoroff");
}
else
{
$.cookie('editor', '', {expires:-1, path:"/"});
$(this).text("Включить editor");
$(this).removeClass();
$(this).addClass("editoron");
}
return false;
});
$(".editoroff").click(function() {
if( $.cookie('editor') != null )
{
$.cookie('editor', '', {expires:-1, path:"/"});
$(this).text("Включить editor");
$(this).removeClass();
$(this).addClass("editoron");
}
else
{
$.cookie('editor', 'on', {expires:31, path:"/"});
$(this).text("Выключить editor");
$(this).removeClass();
$(this).addClass("editoroff");
}
return false;
});
});

В body:
<a href="#" class="editoron">Включить editor</a>

Ну и работает прекрасно.
Еще раз спасибо за ответ.

[danik.js]

Так тут вы на 7-8 строчках изменяете класс. В итоге при каждой загрузке страницы отрабатывает либо первая часть кода (а вторая - мертвый код) либо вторая (первая - мертвый код) в зависимости от установленного класса. Да и видно что код дублируется, а значит вы делаете это не правильно.
Нужно просто понять что $ - это функция, просто с таким прикольным именем. И что она ищет элемены по селектору (прямо сейчас), и если ни одного элемента не найдено с таким селектором, то дальнейшие функции в цепочке, типа .click() не несут полезной нагрузки. Нужно начинать изучениe с чистого JS, а те кто сразу лезет в jQuery вот так и начинает тупить.

[ruslan_mart]

Можно событие ещё через live навешать.

А ещё, мне кажется, что удобнее писать цепочкой:
$(this).text("Выключить editor").removeClass().addClass("editoroff");