Джанго JQuery получить содержимое кнопки

Question

Я работаю над календарем, где одни даты заполнены, а другие открыты.Все даты отображаются с помощью кнопок, но кнопки «Открыть дату» открывают форму для создания нового события в эту дату, тогда как кнопки «Полная дата» ничего не делают.Чтобы открыть форму, я использую модал (код для этого - довольно красивая копия, вставленная из начальной загрузки).

Я использую цикл for в шаблоне, чтобы создать все кнопки.Всякий раз, когда нажимается кнопка открытия даты, мне нужно передать forloop.counter моей функции.Поскольку кнопки нумеруются с помощью forloop.counter, я могу просто извлечь содержимое нажатой кнопки.Мне уже удалось передать другие переменные с помощью jquery следующим образом:

            var test = '{{empty}}'

Но я не могу передать forloop.counter

Мой HTML выглядит так:

           {% for days, active in zip %}
    {% if active %}
    <button id="count" type="button" class="daybutton daybutton1" data-toggle="modal" data-target="#myModal{{forloop.counter}}">{{forloop.counter}}</button><!-- Modal -->
      <div class="modal fade" id="myModal{{forloop.counter}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel{{forloop.counter}}">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title" id="myModalLabel">Wählen Sie eine Uhrzeit für Ihren Termin am</h4><h5>{{ forloop.counter }}</h5><h6> {{month}} {{year}}</h6>
            </div>
            <div class="modal-body">
              {{forloop.counter}}
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button>
              <button id="submit_btn" class="btn btn-link">Send the invitation</button>
              </div>
          </div>
        </div>
      </div>

    {% else %}
      <button id="inactive" class="daybutton inactive" > {{ forloop.counter}} </button>
    {% endif %}
  {% endfor %}

Мой скрипт содержит это:

$(document).on("click", "#submit_btn", function(event){
  count = $("#count").clone().html()
   alert(count)
  });

Это отображает предупреждение, но сообщение всегда "1".

Я немного погуглил и пробовал разные подходы, но всегда либо 1, неопределеноили последний номер петли (в моем случае 29).

Буду рад любой помощи!=) * * 1 018

Answer 1

Это не странно, как вы думаете:

Вы создали идентификатор внутри цикла for

 {% for days, active in zip %}
    {% if active %}
        <button id="count" type="button" class="daybutton daybutton1" data-toggle="modal" data-target="#myModal{{forloop.counter}}">{{forloop.counter}}</button>

'' ''

<button id="submit_btn" cla

Это означает, что несколькокнопки будут созданы с тем же идентификатором id="count".

Очевидно, js всегда будет возвращать последний идентификатор (29 в вашем случае *), когда вы делаете count = $("#count").clone().html() ....

Я предлагаю вам не создавать никаких идентификаторов внутри цикла, это создаст несколько идентичных идентификаторов, которые должны были быть уникальными.

Просто объедините это будет {{ forloop.counter }} или {{ instance.id }} в случаеэто цикл экземпляров

или работа с ним как class атрибуты

<button type="button" data-id="{{forloop.counter}}" class="daybutton daybutton1 count"....>{{forloop.counter}}</button>

'' ''

 <button data-id="{{forloop.counter}}" class="btn btn-link submit_btn">Send the invitation</button>
          </div>

, и js станет:

<code>$(document).on("click", "<b>.submit_btn</b>", function(event){
        <b>count = $(this).closest('.clone').clone().html();</b>
       // count = $(this).data('id'); if you just want the id;
        alert(count)
  });