Jquery: реагировать на динамические классы в формах

Question

Я сделал HTML-форму, которая разбита на разделы.

Я использую Jquery для добавления классов в элемент body в зависимости от того, какие разделы были заполнены.

По умолчанию тело имеет класс purchase-stop, Когда все разделы заполнены, это меняется на purchase-go,

Когда пользователь нажимает кнопку отправки, я использую следующий код для отображения сообщения:

$("input").on('click', '.purchase-stop', function()
{
    alert("You haven't visited all sections. Please visit them all to ensure you are happy with the choices");
});

Беда в том, что это будет отображать даже purchase-stop был изменен на purchase-go,

Как я могу заставить его отображать только когда классы purchase-stop?

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

$(".changing-room").submit(function(e)
    {
        e.preventDefault();

        var isFormValid = true;
        $("input.required").each(function()
        {
            if ($.trim($(this).val()).length === 0)
            {
                $(this).parent().addClass("error");

                isFormValid = false;
            }
            else
            {
                $(this).parent().removeClass("error");
            }
        });
        if (!isFormValid)
        {
            alert("Some fields are blank (highlighted in red). Please fill them in");
            $('input').blur();
        }

        if (isFormValid)
        {
            $('body').addClass('purchase-active');
            window.scrollTo(0, 0);
        }
        return isFormValid;

    });

Но опять же, я хочу, чтобы он запускался только тогда, когда класс body установлен на purchase-go (и не purchase stop).

Согласно документации Jquery, я должен заставить Jquery работать на динамическом классе (как purchase-go нет в HTML под нагрузкой). Для этого мне нужно использовать функцию On(). Функция включения состоит из следующих элементов:

.on("action [e.g. click]", "[trigger element]", function(event)

Тем не менее, я указал элемент триггера, но он не работает.

Answer 1

on() не работает так, как вы думаете.

$("[source].on("[action]", "[trigger element]", function(event)

Когда вы используете on, вы привязаны к source элемент, и событие инициируется для action когда это происходит на trigger element в source,

Итак, в вашем случае вы настраиваете обработчик щелчка, чтобы запускать, когда элемент с классом purchase-stop который является потомком любого input является clickредактор

Вам нужно будет сделать что-то вроде этого:

$('input[type="submit"]').click(function(e) {
    if ($('body').hasClass('purchase-stop')) {
        alert("You haven't visited all sections. Please visit them all to ensure you are happy with the choices");
    }
});

Однако, использование имени класса в теле, чтобы указать, является ли форма действительной, немного странно. Вы можете добавить эту функцию в вашу функцию проверки.