Не работает простой скрипт

@Александр О. · Регистрация: 27.09.2011

Студворк — интернет-сервис помощи студентам

День добрый!
Не могу разобраться казалось бы в простом случае:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
$(document).ready(function(){
   $('.kn').mousedown(function(){                               /* 1-ая часть */
      $(this).addClass("kn-click").removeClass("kn");
   });
 
   $(".kn-click").mouseup(function(){                           /* 2-ая часть */
      $(this).addClass("kn").removeClass("kn-click");
   });
 
   $(".kn-click").mouseout(function(){                           /* 3-я часть */
      $(this).addClass("kn").removeClass("kn-click");
   });
});
</script>

Изначально кнопка имеет class="kn kn-red knopka"
Класс "kn" отвечает за обычный (не нажатый) вид кнопки. Класс "kn-click" отвечает за нажатый вид кнопки
Код выше должен имитировать поведение кнопки при манипуляциях мышкой (нажатие, отжатие, смещение в сторону).
Нажатие работает (класс меняется с "kn" на "kn-click"). А два других события (отжатие и смещение) работающие с классом "kn-click" не работают, словно не чувствуют, что класс "kn" при нажатии уже сменился на "kn-click".

Как зафиксировать смену класса в первой части скрипта, чтобы заработали вторая и третья части?

Добавлено через 16 минут
Причем в таком виде все работает:

HTML5
1
2
3
4
<div class="kn kn-red knopka" Onclick="document.products.submit();"
onMouseDown="this.className='kn-click kn-red knopka';" 
onMouseUp="this.className='kn kn-red knopka';" 
onMouseOut="this.className='kn kn-red knopka';">КУПИТЬ</div>

А как заставить всё работать на jQuery?

@vettel · 19.11.2016, 15:35

Сообщение от Александр О.

А два других события (отжатие и смещение) работающие с классом "kn-click" не работают, словно не чувствуют, что класс "kn" при нажатии уже сменился на "kn-click".

Оно и не должно чувствовать. Не забывайте: код не человек, чувствовать не умеет.

В вашем случае код изначально проходится по обработчикам и вешает их на элементы. В момент выполнения кода (а это документ рэди) элементов с классами kn-click просто не существует, поэтому обработчики click вешаются "в никуда".

Один из способов для работы вашего кода - производить выборку по неизменяемому классу (допустим, knopka).

@shsv382 · 20.11.2016, 20:04

1. Зачем вообще mouseOut? Просто если кнопка была нажата, то обратная смена класса будет по отпусканию кнопки и элементов класса kn-click вообще не будет, а если нет, то элементов класса kn-click не будет даже создано.

2. Почему просто не сделать один обработчик методом toggleClass?

JavaScript
1
2
3
$('.kn').click(function(){                              
      $(this).toggleClass("kn");
   });

Новые блоги и статьи Все статьи Все блоги /
Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .
Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .