jQuery 验证动态添加的输入

Question

我使用 jQuery validate 来验证我正在处理的网站上的一堆表单。

在此站点上，我根据select 选项选择克隆了一些输入。我想验证这些输入，但是当我这样做时，只有第一个得到验证。

我尝试将$('form').validate(); 放在克隆脚本中，其中放置了许多其他脚本（并且可以正常工作），但它仍然只验证第一个。

我该怎么办？

下面是我的克隆脚本，我认为应该在其中放置一个新的validate()。还是什么？

// Clone per number chosen
for (var i = 0; i < childrenCount; i++) {
    birthday
        .clone()
        .attr('name', birthday.attr('name') + count++ - 9)
        .appendTo('.childInputs')
        .children("input.childDD").attr('id', 'child' + count + 'DD')
        .next("input.childMM").attr('id', 'child' + count + 'MM')
        .next("input.childYYYY").attr('id', 'child' + count + 'YYYY')
        .parent().children('.noChild').html(count);

    $(this).parent().next(".linkedToPrev").slideDown('slow');
    $("input.yyyy").mask("9999",{placeholder:" "});
}

我不会发布所有代码，因为它非常复杂。如果您不知道可能导致问题的原因，我会的。

Answer 1

如果您正在动态添加元素，并且正在使用带有 jQ​​uery 的普通事件绑定方法，则新元素不会自动绑定，除非您使用 $.live() 处理程序：

$('form').live('submit', function() {
   var $inputs = $('input', this); //this selects all inputs within the form
   //do validation
});

我确定您现在正在做类似的事情，但这将绑定所有现有的表单元素和所有未来添加的表单元素。当提交事件触发时，脚本将抓取触发事件的表单中的所有现有输入元素，然后您可以对其进行迭代和验证。

希望这就是您想要的。

编辑：由于有人恢复了这篇 4 年前的帖子，因此这里不推荐使用 .live()，这是现代 jQuery 甚至委派文档的方式：

$(document).on('submit', 'form', function () {
    //...
});