Почему метод mouseout работает не так как надо?

Question

[Kerhin]

У меня произошла небольшая проблема с методом mouseout в jQuery. Суть заключается в том, что у меня есть 3 html элемента, к каждому из которых я обращаюсь по отдельности в случае клика по этим самым элементам.
1. При клике по элементу срабатывает функция 'toggleClass', которая добавляет либо удаляет специальный класс 'selected';
2. Затем в этой же функции я создаю условие на проверку того, есть ли в моем элементе новый класс 'selected';
3. Если условие верно, то срабатывает новая внутренняя функция, которая добавляет еще один класс 'hovered', при срабатывании метода 'mouseout';
4. Далее снова идет проверка на наличие класса 'hovered' в элементе, после чего класс можно удалить кликнув 2-й раз по элементу.

Собственно вопрос то в чем. Я более менее коряво данный скрипт реализовал, вроде ничего особенного. Работает как надо, до тех пор, пока я не нажму второй раз по элементу чтобы удалить оба класса 'selected' и 'hovered'. Почему то после второго клика все добавленные классы удаляются (как и требуется), но метод 'mouseout' все-равно срабатывает и добавляет класс 'hovered' обратно, хотя в коде у меня присутствует проверка на наличие класса 'selected', при отсутствии которого метод 'mouseout' срабатывать не должен.

Проверял через отладчик, там было видно, что при первом клике добавляется класс 'selected', затем когда курсор выходит за пределы элемента, то добавляется класс 'hovered'. Затем при повторном клике оба класса удаляются, но когда курсор выходит за границы элемента, то класс 'hovered' опять добавляется без добавления класс 'selected'.

Вот собственно сам код:

<div class="module">
<div class="module">
<div class="module">

var activeModule = $('.module');

activeModule.on('click', function() {

	$(this).toggleClass('selected');

	// Проверка на наличие класса
	if ( $(this).hasClass('selected') === true ) {

		var activeSelected = $('.selected');

		activeSelected.on('mouseout', function() {

			$(this).addClass('hovered');

			if ( $(this).hasClass('hovered') === true ) {
				activeSelected.on('click', function() {
					$(this).removeClass('hovered');
				});
			}
		});
	}
});

Answer 1

[Андрей Ежгуров]

$(function() {
  $('.module').click(function() {
    if (!$(this).toggleClass('selected').hasClass('selected')) {
      $(this).removeClass('hovered');
    }
  }).mouseout(function() {
    if ($(this).hasClass('selected')) { $(this).addClass('hovered'); }
  });
});