javascript - 获取分配给 "re-query"的 jQuery 变量

Question

我正在尝试使用 jQuery 来构建一个自制的验证器。我想我在 jQuery 中发现了一个限制:当将 jQuery 值分配给 json 变量，然后使用 jQuery 将更多 DOM 元素添加到适合变量查询的当前页面时，似乎没有办法访问那些 DOM添加到符合 json 变量查询的页面的元素。

请考虑以下代码:

var add_form = {
    $name_label: $("#add-form Label[for='Name']"),
    $name: $("#add-form #Name"),
    $description_label: $("#add-form Label[for='Description']"),
    $description: $("#add-form #Description"),
    $submit_button: $("#add-form input#Add"),
    $errors: $("#add-form .error"),
    error_marker: "<span class='error'>&nbsp;*</span>"
}
function ValidateForm() {
    var isValid = true;

    add_form.$errors.remove();

    if (add_form.$name.val().length < 1 ) {
        add_form.$name_label.after(add_form.error_marker);
        isValid = false;
    }
    if (add_form.$description.val().length < 1) {
        add_form.$description_label.after(add_form.error_marker);
        isValid = false;
    }

    return isValid
}
$(function(){
    add_form.$submit_button.live("click", function(e){
        e.preventDefault();
        if(ValidateForm())
        {
        //ajax form submission...
        }
    });
})

这里有一个例子:http://jsfiddle.net/Macxj/3/

首先，我制作了一个 json 变量来表示 html 添加表单。然后，我创建了一个函数来验证表单。最后，我将表单提交按钮的点击事件绑定(bind)到验证表单。

请注意，我正在使用 jQuery after() 方法在表单中每个无效字段标签之后放置一个包含“*”的范围。另请注意，我在重新验证之前从表单中清除了先前提交尝试的星号(这是失败的原因)。

显然，调用 add_form.$errors.remove();不起作用，因为 $errors 变量仅指向在创建时与其查询匹配的 DOM 元素。在那个时间点，所有标签都没有以 error_marker 变量为后缀。

因此，jQuery 变量在尝试删除它们时无法识别其查询的匹配元素，因为它们在首次分配变量时不存在。如果 jQuery 变量有一个 eval() 方法可以重新评估其包含的查询以查看是否有任何新的 DOM 元素与它匹配，那就太好了。但是，唉......

有什么建议吗？

提前致谢!

Answer 1

jQuery 对象不是“实时”的，您是正确的——也就是说，jQuery 对象中的元素集不是动态更新的。 (这是一件好事。)

如果你真的想更新一个任意的 jQuery 对象，你可以从 .selector 中获取用于创建对象的选择器:

var els = $('#form input');
els.selector // '#form input'

所以您可以执行 els = $(els.selector); 来重新查询 DOM。

但是请注意，如果您在初始选择器之后修改了集合(如 add、filter、children 等函数) ，或者如果 jQuery 对象是在没有使用选择器的情况下创建的(通过传递 DOMElement)，那么 .selector 将毫无用处，因为选择器将是空的，不正确的，甚至可能无效。

更好的方法是重新构建您的代码，这样您就不会坚持使用陈旧的 jQuery 对象；其他答案提出了一些很好的建议。

^{此外，请确保您也在服务器端验证输入!}