我似乎无法捕捉到select2:open
events,它应该由Django ForeignKey
字段使用的Select2下拉菜单触发,并启用了自动完成功能。
下面是我当前运行的捕捉这些事件的代码(我尝试在Select2打开时自动将焦点设置到子搜索栏):
-- autofocus_select2_searchbars.js
function setFocusOnSearchBarsWhenSelect2WidgetsAreOpen() {
$('select').on('select2:open', () => {
console.log('select2:open');
document.querySelector('.select2-container--open .select2-search__field').focus();
});
}
$(document).ready(function () {
setFocusOnSearchBarsWhenSelect2WidgetsAreOpen();
});
我在change_form.html
中调用这个函数,这样它就可以应用到admin中的每个更改视图:
-- myproject/templates/admin/change_form.html
{% extends "admin/change_form.html" %}
{% load i18n admin_urls static %}
{% block admin_change_form_document_ready %}
{{ block.super }}
<script src="https://code.jquery.com/jquery-3.6.3.slim.min.js" integrity="sha256-ZwqZIVdD3iXNyGHbSYdsmWP//UBokj2FHAxKuSBKDSo=" crossorigin="anonymous"></script>
<script>
{% include "./shared/autofocus_select2_searchbars.js" %}
</script>
{% endblock admin_change_form_document_ready %}
问题是select2:open
事件永远不会触发。
1条答案
按热度按时间czq61nw11#
问题在于
change_form.html
中的CDN导入包含了我自己的jQuery:Django使用的Select2小部件是使用Django中捆绑的jQuery版本初始化的,这些初始化的Select2小部件触发的jQuery事件由同一个jQuery示例处理。
所以解决方案就是删除jQuery的CDN导入,使用django绑定的示例。删除CDN导入后,我在
autofocus_select2_searchbars.js
的顶部添加了以下声明:django
变量是可用的,因为我们扩展了admin/change_form.html
。