Невозможно определить элементы после ajax-вставки

Есть данные в Django DB, при загрузке html страницы она посылает запрос к db и создает html блок в Django шаблоне, а в конце вставляет в html по id. Эта часть работает, чекбоксы создаются и все хорошо, но элементов нет, если я пытаюсь найти их по id после ajax вставки.

Как получить к ним доступ?

html:

<div id="fill-statuses" status-table-url="{% url 'ajax_status_data' %}"></div>

Шаблон Django:

{% for status in statuses %}
<label class="toggle">
        <input class="toggle__input" type="checkbox" id="{{ status.status_new }}_status_check_box">
        <span class="toggle__label">
          <span class="toggle__text">{{ status.status_new }}</span>
        </span>
      </label>
{% endfor %}

view.py:

def fill_status_check_boxes(request):
    statuses = TaskStatus.objects.values('status_new').distinct

    return render(request, 'persons/statuses_for_filter.html', {'statuses': statuses})

А теперь js блок, с комментариями:

function fill_status_check_boxes() {
  const url = $("#fill-statuses").attr('status-table-url')
  $.ajax({
    url: url,
    success: function (data) {
        $('#fill-statuses').html(data)
    },
      complete: function () {
        console.log(document.querySelectorAll("[id*='status_check_box']")) //return array with elements, that's why I thought that all works, when tested it
      }
  })
    console.log(document.querySelectorAll("[id*='status_check_box']")) //but here return empty array []
}

fill_status_check_boxes()

console.log(document.querySelectorAll("[id*='status_check_box']")) //and here also return empty array []

$.ajax() выполняется асинхронно

Поэтому ваши console.log внутри обратного вызова complete отображают то, что вы ожидаете, а не то, что после вызова ajax.

Вы можете создать новую функцию для вызова при завершении :

function fill_status_check_boxes() {
  const url = $("#fill-statuses").attr('status-table-url')
  $.ajax({
    url: url,
    success: function (data) {
        $('#fill-statuses').html(data)
    },
      complete: handleComplete
  })
}

fill_status_check_boxes()

function handleComplete() {
    // Do some stuffs
    console.log(document.querySelectorAll("[id*='status_check_box']"))
}
Вернуться на верх