Двойной клик при использовании .click в JQuery

123

27 марта 2021, 09:10

Есть элемент label с классом radioContainer, при клике на него должен раскрываться список selectmenu с классом meal, дело в том, что при клике происходить двойное выполнение колбэка, т.е console.log('double') выводит в консоль double два раза, из за этой проблемы не получается закрывать selectmenu если он уже открыт (для этого и создана переменная selectStatus);

Вот полный проект с этим багом

P.S: Немного объясню, что тут в коде и для чего, дело в том, что на самом деле есть 2 label с одинаковым классом radioContainer с selectmenu'шками перед ними, но у первого присутствует класс first, и условие внутри .click проверяет наличие класса first у элемента по которому кликнули, если есть - открыть первый список, нету - второй.

let selectStatus = true;
$('label.radioContainer').click(function() {
    console.log('double');
    selectStatus = !selectStatus;
    if($(this).hasClass('first') && selectStatus) {
        $('.meal:first').selectmenu('open');
    } else if(selectStatus){
        $('.meal:not(:first)').selectmenu('open');
    }
}); // end click

Answer 1

Пара исправлений нужно сделать и будет работать.
1) Класс first у вас не в том месте. У вас он в тэге <span> а надо в родительский узел его добавить, а именно в <label class="radioContainer first">. Это для того чтобы ваш $(this) правильно отрабатывал. Иначе он никогда не нашел бы класс first
2) Немного модифицировал ваш event:

$('label.radioContainer').change(function(event) {
    event.stopPropagation();
    let menu = $(this).hasClass('first') ? $('.meal:first') : $('.meal:not(:first)');
    menu.hasClass('ui-selectmenu-button-open') ? menu.selectmenu('close') : menu.selectmenu('open');
 }); // end click