如何在Django4管理站点中捕获所有'select2:open'事件?

r1zk6ea1  于 2023-02-05  发布在  Go
关注(0)|答案(1)|浏览(122)

我似乎无法捕捉到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事件永远不会触发。

czq61nw1

czq61nw11#

问题在于change_form.html中的CDN导入包含了我自己的jQuery:

<script src="https://code.jquery.com/jquery-3.6.3.slim.min.js" integrity="sha256-ZwqZIVdD3iXNyGHbSYdsmWP//UBokj2FHAxKuSBKDSo=" crossorigin="anonymous"></script>

Django使用的Select2小部件是使用Django中捆绑的jQuery版本初始化的,这些初始化的Select2小部件触发的jQuery事件由同一个jQuery示例处理。
所以解决方案就是删除jQuery的CDN导入,使用django绑定的示例。删除CDN导入后,我在autofocus_select2_searchbars.js的顶部添加了以下声明:

const $ = django.jQuery;

django变量是可用的,因为我们扩展了admin/change_form.html

相关问题