javascript - 找不到动态添加的表单元素 ID

Question

我有一个表单，用户可以在其中单击按钮并根据需要添加其他字段。稍后，用户单击提交，我通过 ajax 进行一些错误检查。如果附加字段为空，我想用红色突出显示它们，让用户知道其所需的数据。

jquery 添加行:

  $('#addPerson').click(function(){
  var row = "<div id='row_"+rowNum+"'><div class='leftBigRow'><input type='text' class='field' id='addPerson[name][]' name='addPerson[name][]' placeholder='persons name'></div>";
  $('.additionalPeople').append(row);
  rowNum++;

我的 ajax 调用返回一串有错误的字段 id。例如结果可能是:

 //firstname,lastName,zipCode,...etc

所以我的错误检查是:

 if(result.length > 0)
     {
       var errors = result.split(",");
       for (i=1;i<errors.length;i++)
       {
        alert(errors[i]);
        $('#'+errors[i]).addClass('error');
        alert($('#'+errors[i]).val());
       }
       $("#subForm").attr("disabled", "disabled");
      }

第一个警报返回我所期望的“addPerson[name][0]”； 第二个警报返回未定义。告诉我它找不到那个字段......

我添加了一个 fiddle :fiddle

在我的 fiddle var 结果中，代表了我从 ajax 调用中返回的内容。我的最终目标是通过按 yes 添加每个字段，如果空白则变为红色......

Answer 1

您没有 id 等于“addPerson[name][0]”的元素。向 DOM 添加新的 input 元素时，必须在其 id 和 name 属性中包含 rowNum。 p>

名称/id 属性中请勿包含“[”和“]”。使用:

var row = "<div id='row_"+rowNum+"'><div class='leftBigRow'><input type='text' class='field' id='addPerson_name_"+rowNum+"' name='addPerson_name_"+rowNum+"' placeholder='persons name'></div>";