Событие click выполняется дважды

@Hrommi · Регистрация: 19.02.2013

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

Переключатель сделанный на чекбоксе странно работает, при одном клике событие обрабатывается дважды.

Вот пример: https://jsfiddle.net/jvhnp2a4/2/

В чем может быть причина?

@WhiteMind · 08.04.2016, 16:39

HTML5
1
2
3
4
5
<div class="onoffswitch">
  <label class="onoffswitch-label">
    <input type="checkbox" class="onoffswitch-checkbox" value="Банктеный зал">
  </label>
</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function(){
    $('.onoffswitch-checkbox').on('change', function(){
        $(this).parent().parent().toggleClass('active');
    
        if( $(this).is(':checked') ) {
            console.log('Включил');
        } else {
            console.log('Отключил');
        };
    });
});

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
.onoffswitch {
  position: relative;
  width: 38px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.onoffswitch-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  height: 16px;
  padding: 0;
  line-height: 16px;
  border-radius: 20px;
  background-color: #d3e2ed;
}
.onoffswitch-label:before {
  content: '';
  display: block;
  width: 20px;
  margin: -2px;
  background: #fff;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 22px;
  border-radius: 20px;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.17);
  transition: 0.5s;
}
.onoffswitch-checkbox {
  display: none;
}
.onoffswitch.active .onoffswitch-label {
  background-color: #eddbb4;
}
.onoffswitch.active .onoffswitch-label .onoffswitch-inner {
  margin-left: 0;
}
.onoffswitch.active .onoffswitch-label:before {
  right: 0px;
}

https://jsfiddle.net/jvhnp2a4/3/

@AmateR62 · 08.04.2016, 17:28

Второй раз срабатывает из-за label. Можно сделать заглушку или как предложил WhiteMind

JavaScript
1
2
3
$('.onoffswitch-label').on('click', function(event) {
    event.preventDefault();
});

@Hrommi · 11.04.2016, 08:14 **[ТС]**

AmateR62 прав, второе срабатывание было из-за label.
Всем спасибо за помощь.

Новые блоги и статьи Все статьи Все блоги /
Вывод данных через динамический список в справочнике Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Функция заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .
Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .	Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .

@Hrommi 5 / 5 / 0 Регистрация: 19.02.2013 Сообщений: 55

	Событие click выполняется дважды 08.04.2016, 15:18. Показов 8594. Ответов 3 Метки нет (Все метки) Переключатель сделанный на чекбоксе странно работает, при одном клике событие обрабатывается дважды. Вот пример: https://jsfiddle.net/jvhnp2a4/2/ В чем может быть причина? 0

@Hrommi 5 / 5 / 0 Регистрация: 19.02.2013 Сообщений: 55
	11.04.2016, 08:14 [ТС]
	AmateR62 прав, второе срабатывание было из-за label. Всем спасибо за помощь. 0