Почему не работает шаг назад в форме?

263
17 ноября 2017, 09:41

Есть форма для составления заказа. Форма представляет собой "длинное полотенце" для удобства пользователя она была порезана на 5 шагов которые по очереди должны показыватся пользователю.

https://codepen.io/Jackkill/pen/JOJxVg

В форме есть линейка с отмеченными этапами и кнопки "next".

При нажатии на "next":

  • скрывается текущая часть формы
  • показывается новая
  • ползунок на линейке двигается вправо показывая прогресс в заполнении

При нажатии на кнопку назад (сейчас это предыдущая точка на линейке):

  • скрывается текущая часть формы
  • показывается предыдущая часть формы
  • ползунок на линейке ползет в лево

С ползунком я разобрался а вот с убираниями активных классов на форме - нет( Никак не могу понять почему код не работает Нажимаю на кнопку в первой форме:

//-- click "nextBtn" to show second page
    $('.nextBtn.second').click(function(e) {
        e.preventDefault();
        //-- draw green circle on 2
        $('.steps .secondStep').addClass( "active" );
        //-- draw green line 50%
        progressBar();
        //-- show second form
        $('.yourPartnerInfo__Page').addClass( "active" );
        //-- hide first form
        $('.personalInfo__Page').removeClass( "active" );
    });
    //-- click "nextBtn" to show second page end

Все хорошо результат видно, форма переключилась и ползунок подвинулся.

Двигаемся назад - клик по первому кружечку

//-- click first Green Circle -> to return back on first page
    $('.firstStep.active a').click(function(e) {
        e.preventDefault();
        //-- for all steps -> count to 5 and remove green circles if exist
        for (i = 2; i < 6; i++) {
            Array.from(document.querySelectorAll('.steps > li:nth-child('+ i +')')).forEach(e => e.classList.remove('active'));
            console.log('remove active from'+i);
        }
        //-- remove green line to 25%
        progressBar();
        //-- hide all active pages
        Array.from(document.querySelectorAll('.mainForm ol > li')).forEach(e => e.classList.remove('active'));
        //-- show first active page
        $('.personalInfo__Page').addClass( "active" );
    });//-- click first Green Circle -> to return back on first page end

Нормально второй погас и форма нужная показана.

Кликаем по первой форме и сразу по второй, чтобы попасть на третюю страницу формы.

//-- click "nextBtn" to show third page
        $('.nextBtn.third').click(function(e) {
            e.preventDefault();
            //-- draw green circle on 3
            $('.steps .thirdStep').addClass( "active" );
            //-- draw green line to 75%
            progressBar();
            //-- show third form
            $('.contactsInfo__Page').addClass( "active" );
            //-- hide second form
            $('.yourPartnerInfo__Page').removeClass( "active" );
        });//-- click "nextBtn" to show third page end

форма показана, кружечек стоит и полунок подвинулся вперед.

А теперь самое забавное - нажимаем на второй кружечек чтобы пройти назад и ничего не выходит.

//-- click on second green circle
        $('.secondStep.active a').click(function(e) {
            e.preventDefault();
            console.log('i am second click');
            //-- for all steps -> count to 5 and remove green circles if exist
            for (i = 3; i < 6; i++) {
                Array.from(document.querySelectorAll('.steps > li:nth-child('+ i +')')).forEach(e => e.classList.remove('active'));
                console.log('remove active from'+i);
            }
            //-- draw green line to 50%
            progressBar();
            //-- hide all active pages
            Array.from(document.querySelectorAll('.mainForm ol > li')).forEach(e => e.classList.remove('active'));
            //-- show second active page
            $('.yourPartnerInfo__Page').addClass( "active" );
        });

Лог не выводится console.log('i am second click'); а следовательно и клик не отрабатывает...

Заранее прошу извинения за код, я только учусь и ничего пока не оптимизировал.

Клик на первой точке отрабатывает всегда, на втором, третем, четвертом шаге. Подскажите кто может - почему не отрабатывает клик возврата на вторую форму?

Answer 1

Когда выполняется навешивание обработчика

$('.secondStep.active a').click(function(e) { ...

у элемента с классом secondStep еще не установлен класс active, поэтому селектор .secondStep.active ничего не находит и ничего не делает. Используйте делегирование:

$(document).on('click', '.secondStep.active a', function(e) { ...

http://api.jquery.com/on/

Клик на первой точке отрабатывает всегда

Потому что, когда грузится страница и выполняется Ваш код, у элемента с классом firstStep уже установлен класс active, и код

$('.firstStep.active a').click(function(e) { ...

находит элемент '.firstStep.active a' и назначает ему обработчик события click.

READ ALSO
Как работает getElementById

Как работает getElementById

Ребята вопрос в следующемЕсть код

386
проблемы с регистрацией и входом

проблемы с регистрацией и входом

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

318
На чем сделать заказ билетов для сайта?

На чем сделать заказ билетов для сайта?

С помощью чего лучше всего создать подобный скрипт? Какой фреймворк посоветуете

250
Отправка данных и файлов через ajax

Отправка данных и файлов через ajax

Возникла проблема передачи данных и файлов через ajax, по отдельности все работает, а вот вместе не хочет, подскажите пожалуйста как это обойти,...

285