django_easy_select2库如何初始化或绑定到我要用 htmx 替换的 HTML 元素的问题

Question

我已经成功地使用html来处理AJAX调用来替换django模板表单的一部分。请参阅我在这里发布的问题Django和html动态更新下拉列表的形式。字段。但是，被替换的表单元素是一个多个下拉列表，它使用django_easy_select2库来很好地呈现下拉列表，并且当被html替换时，它不包括django_easy_select2构建的任何额外的html元素。如果有人能告诉我如何解决这个问题，我将不胜感激。

一个不错的选择似乎是在html替换发生后重新初始化djjango_easy_select2库。谢谢你告诉我该怎么做。

Answer 1

我没有使用django_easy_select2，但我已经使用了html与django-select2和其他基于javascript的插件，你要做的是调用初始化脚本后DOM已经解决:

方法1:

让我们假设这是你的html的部分呈现为html响应:

<div>
{{form}}
</div>
{{form.media}} # also add the initialization scripts (they're usually in form.media).

方法2:

将此脚本添加到正文的末尾(不是部分，事件应该在页面加载时添加)

<script type="text/javascript">
document.body.addEventListener('htmx:afterSettle', async (event) => {
// Call the initialization scripts here so they run when the DOM has settled after a swap
// In my case this was:
$('.django-select2').djangoSelect2()
});
</script>