Вы не правильно понимаете принцип работы.
$(".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