Пользовательский JQuery для целевого второго шага последовательности формы

Question

У меня есть скрипт jquery, нацеленный на кнопку «отправить» во второй части формы, состоящей из двух частей.На автономной версии этого же шага формы (т.е. это еще не связанная последовательность форм) скрипт работает для отключения кнопки отправки, пока один из двух наборов переключателей не будет иметь «да».Как часть последовательности, я подключился к событию «cf-connected».Сообщение console.log срабатывает, но ни один из остальных сценариев не работает.

Функциональность, которую я хочу, состоит в том, чтобы оба радиомодуля могли принимать значение «да», но для отправки и удаления «отключено» требуется только одно «да».вход, а также удалить красные стили CSS.Когда эта вторая часть формы будет впервые отображена, я хочу отключить кнопку отправки с активными красными стилями CSS.То, что происходит, ничего из скрипта не запускает, кроме console.log внизу.Вот код, который я загружаю на этой странице:

jQuery( document ).on( 'cf.connected', function () {

// grab the two 'Yes' radio buttons
var yesOne = $("#fld_3055776_1_opt1287614");
var yesTwo = $("#fld_3324990_1_opt2062320");

// disable the submit button initially
var submitButton = $("input[value=submit]").prop("disabled", true);

// class allows the change of cursor:not-allowed
submitButton.addClass("disablePointer");

// give the ::after element "disabled" opacity
var divContainer = $(".caldera-grid .form-group.form-submit div").css("opacity", "0.45");

// grab div with red border
var redDiv = $(".submit-filter > div").addClass("red-border");

// add click listener to radio buttons
$("input[type=radio]").on("click", countUp);


function countUp() {
    console.log("countUp is firing");

    if (yesOne.prop("checked")) {
        submitButton.prop("disabled", false).removeClass("disablePointer");
        divContainer.css("opacity", "1");
        redDiv.removeClass("red-border");
    }
    else if (yesTwo.prop("checked")) {
        submitButton.prop("disabled", false).removeClass("disablePointer");
        divContainer.css("opacity", "1");
        redDiv.removeClass("red-border");
    }
    else if ( (yesOne.prop("checked")) && ( yesTwo.prop("checked")) ) {
        submitButton.prop("disabled", false).removeClass("disablePointer");
        divContainer.css("opacity", "1");
        redDiv.removeClass("red-border");
    }
    else {
        submitButton.prop("disabled", true).addClass("disablePointer");
        divContainer.css("opacity", "0.45");
        redDiv.addClass("red-border");
    }
}    


console.log("Form has moved to next part");

});

Как я могу заставить этот скрипт работать правильно после DOM второго шага в форме

Здесь приведена ссылка на промежуточную форму с 2 частями (обратите внимание, что «шаги» в верхней части каждой части формы не соответствуют одному и тому же шагу формы 1 ишаг 2).

Answer 1

Я смог это исправить.Мне нужно было добавить прослушиватель событий в документ при прокрутке, а затем запустить весь приведенный выше код.Затем, чтобы он не запускался при каждой прокрутке, я ставлю .off () впоследствии.Весь код, который сейчас делает то, что мне нужно, это:

$ (document) .on ('cf.connected', function () {$ (document) .on ('scroll', function () {

    // grab the two 'Yes' radio buttons
    var yesOne = $("#fld_3055776_1_opt1287614");
    var yesTwo = $("#fld_3324990_1_opt2062320");

    // disable the submit button initially
    var submitButton = $("input[value=Submit]").prop("disabled", true);

    // class allows the change of cursor:not-allowed
    submitButton.addClass("disablePointer");

    // give the ::after element "disabled" opacity
    var divContainer = $(".caldera-grid .form-group.form-submit div").css("opacity", "0.45");

    // grab div with red border
    var redDiv = $(".submit-filter > div").addClass("red-border");

    // add click listener to radio buttons
    $("input[type=radio]").on("click", countUp);


    function countUp() {
        if (yesOne.prop("checked")) {
            submitButton.prop("disabled", false).removeClass("disablePointer");
            divContainer.css("opacity", "1");
            redDiv.removeClass("red-border");
        }
        else if (yesTwo.prop("checked")) {
            submitButton.prop("disabled", false).removeClass("disablePointer");
            divContainer.css("opacity", "1");
            redDiv.removeClass("red-border");
        }
        else if ( (yesOne.prop("checked")) && ( yesTwo.prop("checked")) ) {
            submitButton.prop("disabled", false).removeClass("disablePointer");
            divContainer.css("opacity", "1");
            redDiv.removeClass("red-border");
        }
        else {
            submitButton.prop("disabled", true).addClass("disablePointer");
            divContainer.css("opacity", "0.45");
            redDiv.addClass("red-border");
        }
    }
    $(document).off('scroll');
});

});