通过 jQuery 修改的表单 - 无法检索多个字段值答案

【问题标题】：Form modified via jQuery - Not able to retrieve multiple field values通过 jQuery 修改的表单 - 无法检索多个字段值
【发布时间】：2012-11-29 09:50:23
【问题描述】：

我在尝试从 jQuery 表单中获取多个字段时遇到了一些问题。

我使用表单来创建项目。任务数量没有预定义，因此可以通过jQuery动态创建新的表单字段来添加新任务：

HTML 表单

<form action="#" id="createProjectForm" method="post">
<fieldset id="Project">
<label for="title">Title:</label>
<label for="title">Coordinator:</label>
<input type="text" id="coordinator" name="coordinator" placeholder="COORDINATOR" />         
<div id="tasks">
<hr/>
<label for="taskTitle">Task:</label>
<input type="text" id="taskTitle" name="taskTitle" placeholder="TASK TITLE" />
</div>
<label for="createTask"></label>            
<input type="button" id="createTask" value="ADD NEW TASK" />
<label for="submitTask"></label>            
<input type="submit" id="submitTask" value="SAVE AND CREATE PROJECT" />
</form>

JQUERY

$("#createTask").live("click",function() {                  
$('#tasks').clone().insertAfter("#tasks");
});

当我克隆 div“任务”时，我可以正确地看到两个新任务的“taskTitle”输入字段，但在尝试获取值时（使用“每个”）：

JQUERY

$("#createProjectForm").live("submit",function() {
var taskTitles = "";
$("#taskTitle").each(function(){
taskTitles += $.trim($(this).val()) + ",";
console.log("Task: "+taskTitles);
});

我只得到第一个字段的值，而不是第二个，就像它没有正确存储在 DOM 中一样......

有什么建议吗？谢谢！

【问题讨论】：

ID 应该是唯一的。您使用的是 ID 选择器，因此您将始终只获得它在 dom 中找到的第一个元素与 ID

标签： jquery forms dom live each

【解决方案1】：

当您克隆具有 id 的项目时，克隆的项目将获得相同的 id。 Jquery 的 id 选择器只选择第一个匹配项。（见这里http://api.jquery.com/id-selector/）

【讨论】：