Javascript 获取分配给"；的jQuery变量；“重新查询”；

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

请考虑以下代码：

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...
        }
    });
})

var add\u form={
$name_label:$（“#添加表单标签[for='name']”），
$name:$（“#添加表单#名称”），
$description_label:$（“#添加表单标签[for='description']”），
$description:$（“#添加表格#说明”），
$submit_按钮：$（“#添加表单输入#添加”），
$errors:$（“#add form.error”），
错误\u标记：“*”
}
函数ValidateForm（）{
var isValid=true；
添加表单。$errors.remove（）；
如果（添加表格$name.val（）.length<1）{
添加表单.$name\u label.after（添加表单.错误标记）；
isValid=false；
}
如果（添加表格$description.val（）。长度<1）{
添加表单.$description\u label.after（添加表单.错误标记）；
isValid=false；
}
返回有效
}
$（函数（）{
添加表单。$submit按钮。实时（“单击”，功能（e）{
e、 预防默认值（）；
if（ValidateForm（））
{
//ajax表单提交。。。
}
});
})

此处提供了一个示例：

首先，我创建一个json变量来表示html添加表单。然后，我创建一个函数来验证表单。最后，我将表单的submit按钮的click事件绑定到验证表单

请注意，我使用jQuery after（）方法在表单中的每个无效字段标签后面放置一个包含“*”的span。还请注意，在重新验证表单之前，我正在清除表单中上一次提交尝试的星号（这就是失败的原因）

显然，对add_form.$errors.remove（）的调用；不起作用，因为$errors变量只指向创建查询时与其匹配的DOM元素。当时，没有一个标签的后缀是error_marker变量

因此，jQuery变量在试图删除匹配的查询元素时无法识别它们，因为它们在第一次分配变量时不存在。如果jQuery变量有一个eval（）方法，该方法将重新计算其包含的查询，以查看是否有任何新的DOM元素与之匹配，那就太好了。但是，唉

有什么建议吗

---

提前谢谢

对于将要更改的对象，与其将JSON对象引用设为静态值，不如将其设为函数：

$errors:function（）{return$（“#add form.error”）；}，

---

由于它是一个函数，因此每次调用

add\u form.$errors（）

时，它都会重新计算错误字段。您解决该问题的方法存在许多结构性问题：

避免使用全局变量

页面上可能并不总是只有一个表单需要验证。如果有一天你会决定，你将有几个形式。您的

add_表单

变量是一个全局变量，因此会发生冲突

不要使用“提交”按钮单击事件来检测表单提交

如果表单是通过js调用提交的，比如

$（“表单”）.submit（）还是按enter键

如果不确定在创建配置对象时对象是否已存在，则存储选择器而不是DOM对象

.live

已被弃用。改用上的

现在是3点。这将解决您的实际问题，但我强烈建议解决所有4个问题

对于2，附加验证器的最佳位置不是在提交按钮上，而是在表单的提交事件上。大概是这样的：

$("#add-form").submit(function(event) {
    event.preventDefault();

    if (validateForm(this))
       $.ajax({
           url: $(this).attr("action"),
           data: $(this).serialize(),
           //ETC
       });
});

{
    name_label: "Label[for='Name']",
    name: "#Name",
    description_label: "Label[for='Description']",
    description: "#Description",
    errors: ".error",
    error_marker: "<span class='error'>&nbsp;*</span>"
}

function enableValidation(form, configuration) {
  
 $.extend(configuration, {
     //Default configuration parameters here.
 });

  function validateForm(form) {
     //Your original function here with modifications.
  }

  $(form).submit(funciton(e) {
      if (!validateForm(this))
        e.preventDefault();
  });
}

function enableAjax(form) {
   $(form).submit(function(e){
       if (!e.isDefaultPrevented()) {
           e.preventDefault();
           $.ajax(...);
       }
   });
}


$(function() {
   enableValidation("#add-form", {/*specialized config parameters here*/});
   enableAjax("#add-form");
});

请注意，该表单现在也更易于访问。您的配置对象不再需要存储对submit按钮的引用

您的配置对象现在可以简化为以下内容：

$("#add-form").submit(function(event) {
    event.preventDefault();

    if (validateForm(this))
       $.ajax({
           url: $(this).attr("action"),
           data: $(this).serialize(),
           //ETC
       });
});

{
    name_label: "Label[for='Name']",
    name: "#Name",
    description_label: "Label[for='Description']",
    description: "#Description",
    errors: ".error",
    error_marker: "<span class='error'>&nbsp;*</span>"
}

function enableValidation(form, configuration) {
  
 $.extend(configuration, {
     //Default configuration parameters here.
 });

  function validateForm(form) {
     //Your original function here with modifications.
  }

  $(form).submit(funciton(e) {
      if (!validateForm(this))
        e.preventDefault();
  });
}

function enableAjax(form) {
   $(form).submit(function(e){
       if (!e.isDefaultPrevented()) {
           e.preventDefault();
           $.ajax(...);
       }
   });
}


$(function() {
   enableValidation("#add-form", {/*specialized config parameters here*/});
   enableAjax("#add-form");
});

现在，要允许每个表单使用不同的配置参数，请使用以下内容：

$("#add-form").submit(function(event) {
    event.preventDefault();

    if (validateForm(this))
       $.ajax({
           url: $(this).attr("action"),
           data: $(this).serialize(),
           //ETC
       });
});

{
    name_label: "Label[for='Name']",
    name: "#Name",
    description_label: "Label[for='Description']",
    description: "#Description",
    errors: ".error",
    error_marker: "<span class='error'>&nbsp;*</span>"
}

function enableValidation(form, configuration) {
  
 $.extend(configuration, {
     //Default configuration parameters here.
 });

  function validateForm(form) {
     //Your original function here with modifications.
  }

  $(form).submit(funciton(e) {
      if (!validateForm(this))
        e.preventDefault();
  });
}

function enableAjax(form) {
   $(form).submit(function(e){
       if (!e.isDefaultPrevented()) {
           e.preventDefault();
           $.ajax(...);
       }
   });
}


$(function() {
   enableValidation("#add-form", {/*specialized config parameters here*/});
   enableAjax("#add-form");
});

---

正确的说法是，jQuery对象不是“活动的”——也就是说，jQuery对象中的元素集不会动态更新。（这是件好事。）

如果确实要更新任意jQuery对象，可以从

获取用于创建对象的选择器。选择器
：

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

所以你可以做
els=$（els.selector）
重新查询DOM

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

更好的方法是以这样一种方式重新构造代码，即不必保留过时的jQuery对象；其他答案提出了一些好的建议

另外，请确保您也在验证输入服务器端
 这不是JSON，而是一个对象。（JSON是对象的字符串表示形式。）如果函数可以用作对象的构造函数，请使用大写函数名
ValidateForm（）
意味着您可以执行
newvalidateForm
，但您不能将其命名为
ValidateForm
。另外
。live
不推荐使用。改为使用
上的
。与添加和删除星号范围不同，您是否考虑过首先将它们放在所有必填字段旁边，然后从JS/jQuery代码中隐藏和显示它们？（无论是使用
.hide（）
和
.show（）
方法还是通过添加/删除类？）在我看来，jQuery对象在