0

我制作了一个 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() 函数。on函数组成如下：

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

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

4

1 回答 1

1

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

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

当您使用 时on，您将绑定到元素，并且当事件发生在内时source触发该事件。actiontrigger elementsource

因此，在您的情况下，您正在设置一个单击处理程序，以在编辑具有作为any的purchase-stop 后代的类的元素时触发。inputclick

您将需要执行以下操作：

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

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

于 2013-07-17T17:51:39.457 回答