Проблема с behaviors jquery

Аватар пользователя bazavr

Здравствуйте, есть небольшая проблема. На страницу подключаю js файл, в котором описываю behaviors. Проблема конкретно с behaviors.phone_cheked_parent функцией $('.checked-parent').click(function() . При клике событие клика происходит несколько раз (т.е. заходит сразу и в if и в else), пробовал добавлять once, но не помогло, как можно исправить ситуацию?

(function ($) {
    Drupal.behaviors.edit_button_text = {
        attach: function (context, settings) {

   $('#edit-field-email-und-add-more').text('Добавить');
 
   $('#edit-field-auto-number-und-add-more').text('Добавить');

   $('#edit-field-mf-contacts-und-add-more').text('Добавить');

        }
    }
})(jQuery);

(function ($) {
    Drupal.behaviors.phone_cheked = {
        attach: function (context, settings) {

     $('#user-edit-page .row-phone .block-content tbody tr td:nth-child(2) div:nth-child(2) input').click(function () {
            $('input:not(:checked)').parent().removeClass("checked-phone");
            $('input:checked').parent().addClass("checked-phone");
        });
        $('input:checked').parent().addClass("checked-phone");

 
        }
    }
})(jQuery);

(function ($) {
    Drupal.behaviors.phone_cheked_parent = {
        attach: function (context, settings) {

     $('#user-edit-page .row-phone .block-content tbody tr td:nth-child(2) div:nth-child(2)').click(function () {

            $('label').not( ".control-label.checked-phone").parent().removeClass("checked-parent");
            $('.control-label.checked-phone').parent().addClass("checked-parent");

                $('.checked-parent').click(function() {

                        if ($(this).siblings().hasClass('to-hide')) {
                                console.log($(this).siblings().hasClass('to-hide'));
                                $(this).siblings().removeClass('to-hide');
                        } else {
                                $(this).siblings().addClass('to-hide');
                                console.log($(this).siblings());
                        }

                });

        });

        $('.control-label.checked-phone').parent().addClass("checked-parent");
                $('.checked-parent').siblings().addClass("to-hide");
 
        }
    }
})(jQuery);

Тип материала:
0 Thanks

Комментарии

Аватар пользователя itcrowd72
itcrowd72 4 месяца назад

Не нужно каждый behavior оборачивать в (function ($) { // })(jQuery);

Аватар пользователя bumble
bumble 4 месяца назад

Используйте once():

$('.checked-parent').once().click(function() {
  if ($(this).siblings().hasClass('to-hide')) {
    console.log($(this).siblings().hasClass('to-hide'));
    $(this).siblings().removeClass('to-hide');
  } else {
    $(this).siblings().addClass('to-hide');
    console.log($(this).siblings());
  }
});
Аватар пользователя bazavr
bazavr 4 месяца назад

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

Аватар пользователя bumble
bumble 4 месяца назад

А, сорри, не прочитал внимательно кода.
У Вас, зачем-то, 2 клика, должно хватить 1го.
Нужно либо к вот этой вот простыне once лепить:

$('#user-edit-page .row-phone .block-content tbody tr td:nth-child(2) div:nth-child(2)').click

Или выводить отдельно из-под нее этот ивент клика:

$('.checked-parent').click

И в нем уже once().

Аватар пользователя bazavr
bazavr 4 месяца назад

к простыне лепил once - не помогло. Если эту часть $('.checked-parent').click вынести то работать будет также, два события происходит, и выносить ее нельзя оттуда, они друг без друга не могут

Аватар пользователя bumble
bumble 4 месяца назад

Звучит как не правда :)

Аватар пользователя bazavr
bazavr 4 месяца назад

да вот я тоже в это со вчерашнего дня не верю но есть как есть. Я вешал часть которая после else на dblclick, тогда по клику у нас с рабатывает одно, а по двойному - второму и все корректно работает, но вот беда, нужно чтобы было по одному клику)

Аватар пользователя bumble
bumble 4 месяца назад

Опишите что пытаетесь сделать, если приведете пример структуры - обещаю посмотреть и вникнуть.

Аватар пользователя bazavr
bazavr 4 месяца назад

структура примерно такая jsfiddle .

Основа: у нас есть структура div(группа радиокнопок)->div(радиокнопка, их много)->label->input

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

Что есть:

  1. При загрузке страницы label получает класс checked-phone если внутри label у нас радиокнопка которая выбрана.
  2. При загрузке страницы родитель у label получает класс checked-parent в том случае если у label есть класс chacked-phone.
  3. При загрузке страницы все родственники chacked-parent получат класс to-hide (чтобы скрыть их)
  4. При клике на радиокнопки в группе классы checked-phone и checked-parent удаляются если кнопка больше не выбрана и добавляются на ту кнопку которую выбрали.

Если в части $('.checked-parent').click(function() убрать else то имеем:

  1. При нажатии на кнопку с классом chacked-parent произойдет проверка есть ли у родственников класс to-hide, если да то у родственников он удалится.

Чего не хватает:

  1. Если у родственников chacked-parent нету класса to-hide и происходит клик по нему или его родственникам, то нужно добавить класс to-hide всем элементам группы за исключением элемента с классом chacked-parent
Аватар пользователя bumble
bumble 4 месяца назад

Посмотрите вот этот пример: https://jsfiddle.net/m0334t5f/5/
Надеюсь, я уловил суть.

UPD - я вносил правки в HTML, в Вашем примере были ошибки с комментированием.

Аватар пользователя Andruxa
Andruxa 4 месяца назад

Надо указывать context вторым аргументом:
$(selector, context).something();

Аватар пользователя gun_dose
gun_dose 4 месяца назад

Недавно столкнулся с подобным на восьмёрке. Решилось все оборачиванием в each()