Обрабывать событие только при наличии определённого класса у элемента.

@xoma_204 · Регистрация: 06.08.2014

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

Здравствуйте, пробую через консоль запустить 2 кода:
страница: multivarka.pro/catalog/kategor/multivarki/skycooker_multivarka_m800s/
кнопка: предзаказ
код 1:

JavaScript
1
2
3
$(".tk-myriad").on("click", function(){
alert("123")
})

После клика меняется класс, НО когда после измененного класса, при повторном клике скрипт все равно срабатывает.
Почему? класс кнопки поменялся
код 2:

JavaScript
1
2
3
$("body").on("click", '.tk-myriad', function(){
alert("123")
})

Данный код вообще не срабатывает.
Почему? Где ошибка?
Заранее благодарю

@Lazy_Den · 15.10.2014, 22:29

Сообщение от xoma_204

кнопка: предзаказ

Наверно нужно разобраться, где у вас кнопка "Предзаказ", а потом уже можно что-то думать.

Сообщение от xoma_204

Где ошибка?

Обычно в консоли.

@xoma_204 · 16.10.2014, 00:20 **[ТС]**

Вы не видете кнопку предзаказ на сайте?

Добавлено через 3 минуты
Извиняюсь код 1 должен быть таким:

JavaScript
1
2
3
$('[class="tk-myriad buy"]').on("click", function(){
alert("ggg")
})

После клика меняется класс, НО когда после измененного класса, при повторном клике скрипт все равно срабатывает.
Почему? класс кнопки поменялся

@Lazy_Den · 16.10.2014, 00:41

Сообщение от xoma_204

класс кнопки поменялся

Кроме вас, это никому не известно, поэтому поверим на слово.
Если вам нужно, чтоб клик обрабатывался только, если у элемента присутствуют оба класса, то это можно сделать несколькими способами:

JavaScript
1
2
3
4
5
6
7
8
9
$('parent_static_element').on('click', '[class="tk-myriad buy"]', function(){
     // чего-то делаем
});
// или
$('parent_static_element').on('click', '.tk-myriad', function(){
    if($(this).hasClass('buy')){
        // чего-то делаем
    }
});

Можно еще несколько способов использовать: фильтрации, флаги и т.д., но подбирать нужно исходя из ситуации.

@xoma_204 · 16.10.2014, 12:29 **[ТС]**

А почему не работают варианты кодов котрые я привел?
ссылка на страницу в шапке темы
я проверяю через консоль

@Lazy_Den · 16.10.2014, 13:39

Сообщение от xoma_204

А почему не работают варианты кодов котрые я привел?

Первый вариант у вас работал без делегированной обработки событий.

@xoma_204 · 16.10.2014, 14:38 **[ТС]**

А второй?
зачем в первом нужно делегирование?
ведь элемент меняет класс и событие второй раз срабатывать НЕ должно
но оно срабатывает
почему?

@Lazy_Den · 16.10.2014, 15:18

Сообщение от xoma_204

А второй?

А вот второй вообще не нужен. Такого рода работа с элементом, должна быть в одном обработчике. По поводу первого и простым языком - без делегирования, JS "не знает" об изменениях класса элемента и "прочитав" его при загрузке страницы, работает как с неизменным. Обратите внимание на такой пример:

HTML5
1
2
3
4
<div id="parent">
    <button class="first">Кнопка с динамически обновлением класса</button>
</div>
<div id="test"></div><!-- для отслеживания действий -->

JavaScript
1
2
3
4
5
6
7
8
9
10
var testOut = $('#test');
// Первый обработчик без делегирования
$('.first').on('click', function(){
    testOut.append('Первый обработчик сработал<br>');
    $(this).toggleClass('first second');
});
// Второй обработчик с делегированием
$('#parent').on('click', '.second',function(){
    testOut.append('Второй обработчик сработал<br>');
});

Он хорошо показывает, почему второй обработчик лишний и вы без труда заметите, что без делегированной обработки, первая часть кода всегда срабатывает.

@xoma_204 · 16.10.2014, 15:48 **[ТС]**

Стоп а чо не так со вторым кодом?
я вешаю обработчик на body
И ищу внутри него эту кнопку
почему не срабатывает alert?

@Lazy_Den · 16.10.2014, 16:28

Сообщение от xoma_204

почему не срабатывает alert?

Вы уже куда-то поплыли в другую степь. Читаем в вашем вопросе:

Сообщение от xoma_204

при повторном клике скрипт все равно срабатывает

То срабатывает при повторном, то уже не срабатывает.
Я вам посоветовал оставить только один обработчик, проверять наличие необходимых классов внутри него. Это работает? Надеюсь... Как у вас было изначально - я не знаю, что изменили с тех пор - не в курсе, разгребать весь код на сайте в поиске возможной ошибки - нет времени.

@xoma_204 · 20.10.2014, 01:30 **[ТС]**

Хорошо, давайте разберем вот этот код

JavaScript
1
2
3
$("body").on("click", '.tk-myriad', function(){
alert("123")
})

Где в нем ошибка?
страница в шапке темы
Aler не срабатывает, почему?

@Lazy_Den · 20.10.2014, 01:36

Сообщение от xoma_204

Где в нем ошибка?

Ошибок нет, нежелательное отсутствие точки с запятой - присутствует.

Сообщение от xoma_204

Aler не срабатывает, почему?

Я не телепат. Может потому, что код в DOM-Ready не обёрнут.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@xoma_204 1 / 1 / 0 Регистрация: 06.08.2014 Сообщений: 157
	16.10.2014, 12:29 [ТС]
	А почему не работают варианты кодов котрые я привел? ссылка на страницу в шапке темы я проверяю через консоль 0

@xoma_204 1 / 1 / 0 Регистрация: 06.08.2014 Сообщений: 157
	16.10.2014, 14:38 [ТС]
	А второй? зачем в первом нужно делегирование? ведь элемент меняет класс и событие второй раз срабатывать НЕ должно но оно срабатывает почему? 0

@xoma_204 1 / 1 / 0 Регистрация: 06.08.2014 Сообщений: 157
	16.10.2014, 15:48 [ТС]
	Стоп а чо не так со вторым кодом? я вешаю обработчик на body И ищу внутри него эту кнопку почему не срабатывает alert? 0