Джанго множественного 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%} 

это создаст п форму с идентификатором первая форма равна 1, вторая - 2,. , ., n-й - n. Теперь, когда я открываю консоль javascript в chrome, и я пытаюсь выполнить, например, $('#1'), то, что он возвращает, является [<form onsubmit=​"return false;​" id=​"1">​</form>​]. По какой-то причине <input> не связан с формами. Когда я пытаюсь запустить $('#Grade') с консоли javascript, он показывает [<input type=​"text" size=​"1" id=​"Grade" name=​"Grade" maxlength=​"1" value=​"A">​], что и я ожидаю, что будет отображаться для вклада Grade в первой форме. Почему поля ввода не связаны с их соответствующей формой?

Answer 1

ID должны быть уникальными. Похоже, вы не использовали forloop.counter в своих <input> идентификаторах. Это означает, что ваш цикл for копирует id="Grade" и id="feedback" как идентификатор входа для каждой формы. Кроме того, выбор идентификаторов с JQuery только манипулирует первый экземпляр 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"

////////

Кроме того, это, вероятно, немного лучше использовали названные идентификаторами, например:

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

будет лучше подходит в качестве:

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

так идентификатор будет захвачена писать $('#form1') или $('#form2') и т.д. ...