无法识别 ajax 插入后的元素

Question

Django数据库中有一个数据，当加载html页面时，它向数据库发送请求，并在Django模板中创建html块，最后通过id插入到html。这部分工作，复选框创建，一切都很好，但如果我在ajax插入后尝试通过id找到它们，就没有元素了。

如何访问它们？

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 []

Answer 1

$.ajax()异步执行

因此，这就是为什么complete回调中的console.log显示您所期望的内容，而不是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']"))
}