Jquery：对表单中的动态类做出反应

Question

我制作了一个 HTML 表单，它被分成多个部分。

我正在使用 Jquery 为 body 元素添加类，具体取决于已填写的部分。

默认情况下，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() function。 on函数组成如下：

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

但是，我已经指定了一个触发元素，但它不起作用。

Answer 1

on() 不像你想的那样工作。

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

当您使用on 时，您将绑定到source 元素，并且当action 发生在source 内的trigger element 上时会触发该事件。

因此，在您的情况下，您正在设置一个单击处理程序以在具有 purchase-stop 类这是任何input 的后代 的元素是clicked 时触发。

你需要做这样的事情：

$('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");
    }
});

不过，在正文中使用类名来指示表单是否有效有点奇怪。您可以将该功能添加到您的验证功能中。