Django 多个 HTML 表单 jquery 选择器

Question

所以我有一些模板逻辑，它为我传递的字典中的每个键创建一个 HTML 表单：

{%if students%}

                    {%for data,student in students.iteritems%}

                        <form  onsubmit = "return false;" id="{{forloop.counter}}">
                            {% csrf_token %}

                            <tr>
                            <td>{{student.name}}</td>
                            {%ifequal student.grade ' '%}
                                <td><input type=text  size="1"  id ='Grade'     name='Grade' maxlength="1" /></td>
                                <td><input type=text  size="50" id = 'Feedback' name='Feedback' /></td>

                            {%else%}
                                <td><input type=text  size="1"  id ='Grade' name='Grade' maxlength="1" value = "{{student.grade}}"/></td>
                                <td><input type=text  size="50" id = 'Feedback' name='Feedback' value = "{{student.feedback}}"/></td>

                            {%endifequal%}
                                <td><button type='submit' class="radius button success medium" onclick=submitGrade("{{forloop.counter}}")>Save</button></td>
                                <td><img src="{% static "img/check.png" %}"></td>
                                <td><input type=hidden id = 'email' name = "email" value = "{{student.email}}"></td>
                            </tr>
                        </form>

                    {%endfor%}
                    </form>
            {%endif%}

这将创建 n 个表单，第一个表单的 id 为 1，第二个为 2，。 . .，第 n 个是 n。现在，当我在 chrome 中打开 javascript 控制台并尝试执行 $('#1') 时，它返回的是 [<form onsubmit=​"return false;​" id=​"1">​</form>​]。出于某种原因，<input> 没有与表单关联。当我尝试从 javascript 控制台运行 $('#Grade') 时，它显示 [<input type=​"text" size=​"1" id=​"Grade" name=​"Grade" maxlength=​"1" value=​"A">​] 这是我希望为第一个表单的 Grade 输入呈现的内容。为什么输入字段不与各自的表单关联？

Answer 1

ID 应该是唯一的。看起来您没有在 <input> id 中使用 forloop.counter。这意味着您的for 循环正在复制id="Grade" 和id="feedback" 作为每个表单的输入ID。此外，使用 JQuery 选择 ID 只会处理找到的 ID 的第一个实例，除非它是通过 .find() 捕获的 - 即 $('#form1').find('input[id="1"]')

例子：

<td><input type=text size="1" id ='Grade' name='Grade' maxlength="1" /></td>

应该是：

<td><input type=text size="1" id ='Grade{{forloop.counter}}' name='Grade' maxlength="1" /></td>

id="feedback" 也是如此

////////

另外，使用命名 id 可能会更好一些，例如：

<form onsubmit = "return false;" id="{{forloop.counter}}">

会更适合：

<form onsubmit = "return false;" id="form{{forloop.counter}}">

所以 id 将通过写入 $('#form1') 或 $('#form2') 或等来捕获...