jQuery验证不会在动态添加的表单字段上触发答案

【问题标题】：jquery validation not firing on dynamically added form fieldsjQuery验证不会在动态添加的表单字段上触发
【发布时间】：2014-10-13 20:39:46
【问题描述】：

jsfiddle 显示： http://jsfiddle.net/2DUX2/277/

我正在尝试将 jquery validate 与 tooltipster 一起使用。它一直有效，直到我尝试添加更多项目，然后它尝试转到表单操作而不是验证新字段。有谁知道我做错了什么？

$('#RMAForm input[type="text"], select').tooltipster({
    trigger: 'custom',
    onlyOne: false,
    position: 'right'
});

// initialize validate plugin on the form
$("#RMAForm").validate({
    // any other options & rules,
    errorPlacement: function (error, element) {
        var lastError = $(element).data('lastError'),
            newError = $(error).text();

        $(element).data('lastError', newError);

        if(newError !== '' && newError !== lastError){
            $(element).tooltipster('content', newError);
            $(element).tooltipster('show');
        }
    },
    success: function (label, element) {
        $(element).tooltipster('hide');
    }
});

我在表单元素上使用了所需的类

【问题讨论】：

标签： jquery jquery-validate tooltipster

【解决方案1】：

通常，我会说您没有在动态创建的元素上声明规则。但是，由于您已经通过内联属性声明了规则，因此该部分工作正常。绕过验证的表单意味着验证被破坏（这种情况不是由于未能在动态元素上声明规则造成的）。

在您的情况下，.validate() 方法被 ToolTipster 破坏，控制台错误已验证。

错误：您在未初始化的元素上调用了 Tooltipster 的“内容”方法

这意味着您还必须在创建新元素之后调用.tooltipster 方法。我只是将以下代码复制到您的 click 处理函数中，并在创建新元素后放置它。

$("#AddOne").click(function () {

    // your code that creates new form elements.

    // attach ToolTipster to new elements here...

    $('#RMAForm input, select').tooltipster({
        trigger: 'custom',
        onlyOne: false,
        position: 'right'
    });

    ....

工作演示：http://jsfiddle.net/2DUX2/278/

【讨论】：

【解决方案2】：

对于动态添加的元素，您必须使用委托函数。这里有更多关于它的信息：jquery delegate

【讨论】：

您不能以这种方式将 jQuery Validate 规则添加到动态创建的字段中。但是，这是一个有争议的问题，因为 OP 的 .validate() 方法正在被 ToolTipster 根据控制台错误破坏。最后，答案应该是独立的，专门解决 OP 的问题，而不是简单地提供通用指南。