@uzi_no_uzi

Почему click срабатывает 2 раза?

Есть какая-то кнопка, при клике на эту кнопку вызывается pop'up с инфой, которую туда же и загружаю при этом клике. Эта инфа - это чек боксы, на которые там же вешаю обработчики событий, проблема в том, что обработчик срабатывает 2 раза по непонятной причине. Других обработчиков не висит на эти кнопки, я проверял, да и в отладчике показывает что клик 2 раза срабатывает, почему? Пробовал выносить привязку обработчиков к чекбоксам в левую функцию, пробовал unbind, пробовал делать костыль, который считает кол-во кликов (но он не сработал), пробовал .one('click), но он не подошел под эту ситуацию, ведь обработчик удаляется сразу

$('.el-chat__photo--options').click(function(event) {

        var chatId = $(this).parents('.el-chat').attr('data-id');
        var groupsWrapper = $(this)



        $('.groups-for-user-modal__list').empty();

        $('.lk-groups .el-group').each(function() {

            var groupName = $(this).find('.el-group__title').text();
            var groupSymbol = $(this).find('.el-group__letter span').text();
            var groupColor = $(this).find('.el-group__letter').css('background-color');

            
            var groupId = $(this).attr('data-id');

            var inGroup = false;
            group.forEach(function(item) {
                if(item.id == groupId) {
                    if(item.users.indexOf(+chatId) != -1) {
                        inGroup = true;
                    }
                }
            })


            var groupItem = `
                    <div class="access-item" data-id='${groupId}'>
                        <label class="c-check">
                          <input type="checkbox" ${inGroup ? 'checked' : null}>
                          <div class="c-check__body">
                            <div class="c-check__box"></div>
                            <div class="c-check__label">
                              <div class="group-symbol" style="background-color: ${groupColor}"><span>${groupSymbol}</span></div>
                              <div class="access-name">${groupName}</div>
                            </div>
                          </div>
                        </label>
                    </div>
            `

            $('.groups-for-user-modal__list').append(groupItem);
        })

        $.magnificPopup.open({
            items: {
                src: '#groups-for-user',
            },
            type: 'inline',
        });

        $('.mfp-close').remove();

         var magnificPopup = $.magnificPopup.instance;


         console.log( $('.groups-for-user-modal__list .access-item'))



        $('.groups-for-user-modal__list .access-item').each(function() {
            $(this).on('click', function() {
                var input = $(this).find('input[type=checkbox]').attr('checked');
                console.log(input)
                
            })
        })




        $('.groups-for-user-modal__content .g-btn').click(function() {

            

            magnificPopup.close();

        
        })
        

    })


Вот это срабатывает 2 раза

$('.groups-for-user-modal__list .access-item').each(function() {
            $(this).on('click', function() {
                var input = $(this).find('input[type=checkbox]').attr('checked');
                console.log(input)
                
            })
        })


В чем может быть проблема?
  • Вопрос задан
  • 2411 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
Потому что клик по label вызывает клик по чекбоксу. Можно проверять, откуда пришёл клик, и игнорировать всё, что не от input'а. А лучше - вместо click обрабатывать change.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы