在 Ajax 调用不起作用后向元素添加 css 类

如何解决在 Ajax 调用不起作用后向元素添加 css 类

我有一个对象文字，负责为键盘用户启用和禁用自定义大纲。所有自定义 outline css 类都嵌入在 HTML 文档中并使用 :focus 激活。当用户从键盘切换到鼠标时，带有 outline: none 的 css 类将应用于所有可聚焦元素。请在下面找到代码。底部描述了我遇到的问题。

export const OUTLINE_FOR_KEYBOARD_USERS = {
  focusableElements: document.querySelectorAll(`
    .element1_outline,.element2_outline,.element3_outline,`),enableOutline () {
    if (event.key === 'Tab' || (event.shiftKey && event.key === 'Tab')) {
      document.addEventListener('focusin',OUTLINE_FOR_KEYBOARD_USERS.showOutline);
    }
  },showOutline () {
    for (const elements of OUTLINE_FOR_KEYBOARD_USERS.focusableElements) {
      elements.classList.remove('outline-none');
    } 
  },hideOutline () {
    for (const elements of OUTLINE_FOR_KEYBOARD_USERS.focusableElements) {
      elements.classList.add('outline-none');
    }
    document.removeEventListener('focusin',OUTLINE_FOR_KEYBOARD_USERS.showOutline);  
  },};

在主JS文件中：

import { OUTLINE_FOR_KEYBOARD_USERS } from  './modules/outline-for-keyboard-users.js';
document.addEventListener('keydown',() => OUTLINE_FOR_KEYBOARD_USERS.enableOutline(event));
document.addEventListener('mousedown',() => OUTLINE_FOR_KEYBOARD_USERS.hideOutline());

在同一个主JS文件中调用Ajax： 这是当用户从购物篮中移除所有产品并加载新元素以显示“购物篮为空”页面时的情况。

function controlBasket (event) {
  event.preventDefault();
  $.ajax({
    url: url,method: 'POST',data: {
      // some data
    },success(response) {
      if (removeAllLinkClicked) {
        loadElementsForBasketEmptyPage(response);
    },});
}

function loadElementsForBasketEmptyPage (response) {
  const basketEmptyPageFocusableElements = ($('<div/>').append(response).find('.element1_outline,.element1_outline,.element1_outline'));
  OUTLINE_FOR_KEYBOARD_USERS.focusableElements = basketEmptyPageFocusableElements;
}

除了我用 ajax 更新购物车页面之外，一切都很好。在这种情况下，当我在单击任何 focusableElements 后从对象内为 focusableElements 运行 console.log 时，我可以看到已添加了 css 类 outline: none 但是当我检查开发工具中的元素我看不到添加的类 outline: none。这就像更改仅从对象内部可见，而不能从文档（全局？）上下文中看到，因此当我单击任何 focusableElements 时，轮廓仍然存在。 如果我刷新页面，它就可以正常工作。